Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript]Zakładki w JavaScript, Proszę o pomoc.
zavada
post
Post #1





Grupa: Zarejestrowani
Postów: 68
Pomógł: 6
Dołączył: 15.06.2009
Skąd: Kraków

Ostrzeżenie: (0%)
-----


Witam!
Mam problem ze skryptem JS do zakładek. Mam dwa identyfikatory: #active i #normal. Chcę, aby skrypt zamieniał obiekt z id #active na #normal i zmieniał obiekt podany w funkcji na #active. Zupełnie nie wiem też, jak zrobić wyświetlanie zawartości zakładki w #content. Może obj.innerHTML? Zamiana #active na #normal działa, ale ostatnia linijka kodu nawala:

Kod
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
  <title>Narzędzia administracyjne</title>
  <link href="style.css" type="text/css" rel="stylesheet">
  <script type="text/javascript">
  function display(setContentDiv) {
    activeDiv = document.getElementById("active");
    activeDiv.id = "normal";
    setContentDiv.id = "active";
  }
  </script>
</head>
<body>
<table cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td id="padding"> </td>
      <td><div id="setContent"><p id="active"><a href="javascript:display(this)">Zakładka 1</a></p></div></td>
      <td id="padding"> </td>
      <td><div id="setContent"><p id="normal"><a href="javascript:display(this)">Zakładka 2</a></p></div></td>
      <td id="padding"> </td>
      <td><div id="setContent"><p id="normal"><a href="javascript:display(this)">Zakładka 3</a></p></div></td>
      <td id="padding"> </td>
      <td><div id="setContent"><p id="normal"><a href="javascript:display(this)">Zakładka 4</a></p></div></td>
      <td id="padding"> </td>
      <td><div id="setContent"><p id="normal"><a href="javascript:display(this)">Zakładka 5</a></p></div></td>
      <td id="padding"> </td>
    </tr>
    <tr>
      <td colspan="11"><div id="content">Treść zakładki [font="Courier New"]x[/font]</div></td>
    </tr>
  </tbody>
</table>
</body>
</html>


Proszę o pomoc!

Ten post edytował zavada 9.07.2009, 08:01:26
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
Quantum
post
Post #2





Grupa: Zarejestrowani
Postów: 450
Pomógł: 84
Dołączył: 27.11.2008
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


Zaraz dam Ci przykład jak ja to zrobiłem, bo pisałem 2 dni temu dla siebie.

edit:
Jak zawsze skryptu nie dokończyłem (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)
CSS'a musiałbyś dostosować do swoich potrzeb, żeby go zmienić na bardziej przypominające zakładki.
Skrypt działa w IE 6+, w FF i Operze testowane na najnowszych wersjach.

Kod
<style>
div#tabselect a.activeTab{padding:5px;border:1px solid #798b59;background-color:#e1efca;color:#798b59;text-decoration:none;font-weight:bold;}
div#tabselect a.nonactiveTab{padding:5px;border:1px solid gray;background-color:#e5e5e5;color:#848484;text-decoration:none;}
div#tabselect a:hover.nonactiveTab{border:1px solid #94a96d;background-color:#eef8de;color:#798b59;}
div.nonactive{display:none;}
div.active{display:block;}
div#selectedTab{display:none;}
div#tabselect{margin:15px;}
div.tabcontent{margin:5px;padding:15px;}
    </style>
    
    <script>
    function tabSelect(tabId)
    {
        var lastTab = document.getElementById('selectedTab').innerHTML;
        document.getElementById('tab' + lastTab).className = 'nonactive';
        document.getElementById('tab' + tabId).className = 'active';
        document.getElementById('link' + lastTab).className = 'nonactiveTab';
        document.getElementById('link' + tabId).className = 'activeTab';
        document.getElementById('selectedTab').innerHTML = tabId;
    }
    </script>


  1. <div id="selectedTab">1</div>
  2. <div id="tabselect">
  3. <a href="javascript:void(0);" onclick="tabSelect(1);" class="activeTab" id="link1">zakładka 1</a>
  4. <a href="javascript:void(0);" onclick="tabSelect(2);" class="nonactiveTab" id="link2">zakładka 2</a>
  5. <a href="javascript:void(0);" onclick="tabSelect(3);" class="nonactiveTab" id="link3">zakładka 3</a>
  6. </div>
  7. <div class="tabcontent">
  8. <div id="tab1" class="active">
  9. zakładka 1
  10. </div>
  11. <div id="tab2" class="nonactive">
  12. zakładka 2
  13. </div>
  14. <div id="tab3" class="nonactive">
  15. zakładka 3
  16. </div>
  17. </div>


Ten post edytował sniffer32 9.07.2009, 08:58:35
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 14.10.2025 - 19:06