Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Zakładki w JavaScript
Forum PHP.pl > Forum > Przedszkole
zavada
9.07.2009, 07:57:41
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!
Quantum
9.07.2009, 08:20:59
Kod
setContent = document.getElementById(setContentDiv);
setContent.id = "active";


Zdefiniowałeś obiekt tylko dla activeDiv, więc chyba nie miało prawa działać, nie znam się dobrze na JS, ale tak chyba powinno być. Swoją drogą, Ty pisałeś skrypt ? Jak tak to gdybym ja to robił dla każdego diva dałbym inny identyfikator, i zmieniał jedynie klasy .active / .normal , IMO id powinien być statyczny i unikalny.
zavada
9.07.2009, 08:23:15
Tak ja pisałem. Spróbuję z osobnym id.
Nie działa sad.gif
Quantum
9.07.2009, 08:26:13
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 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>


[HTML] pobierz, plaintext 
  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>
[HTML] pobierz, plaintext
zavada
9.07.2009, 09:21:21
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(bookmarkId) {
    /* activeDiv = document.getElementById("active");
    activeDiv.id = "normal";
    setContent = document.getElementById(setContentDiv);
    setContent.parent.id = "active"; */    
    var lastTab = document.getElementById("active");
    document.getElementById('content' + lastTab).style.display = 'none';
    document.getElementById('content' + bookmarkId).style.display = 'block';
    document.getElementById('bookmark' + lastTab).parent.className = 'normal';
    document.getElementById('bookmark' + bookmarkId).parent.className = 'active';
    document.getElementById('active').innerHTML = bookmarkId;
  }
  </script>
</head>
<body>
<!-- <div id="setContent"><p class="padding">&nbsp;</p></div> -->
<table cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td id="padding">&nbsp;</td>
      <td><div id="setContent"><p class="active" id="bookmark1"><a href="javascript:display(1)">Zakładka 1</a></p></div></td>
      <td id="padding">&nbsp;</td>
      <td><div id="setContent"><p class="normal" id="bookmark2"><a href="javascript:display(2)">Zakładka 2</a></p></div></td>
      <td id="padding">&nbsp;</td>
      <td><div id="setContent"><p class="normal" id="bookmark3"><a href="javascript:display(3)">Zakładka 3</a></p></div></td>
      <td id="padding">&nbsp;</td>
      <td><div id="setContent"><p class="normal" id="bookmark4"><a href="javascript:display(4)">Zakładka 4</a></p></div></td>
      <td id="padding">&nbsp;</td>
      <td><div id="setContent"><p class="normal" id="bookmark5"><a href="javascript:display(5)">Zakładka 5</a></p></div></td>
      <td id="padding">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="11"><div id="content">
      <div id="content1" style="display: block;">Treść zakładki 1</div>
      <div id="content2" style="display: none;">Treść zakładki 2</div>
      <div id="content3" style="display: none;">Treść zakładki 3</div>
      <div id="content4" style="display: none;">Treść zakładki 4</div>
      <div id="content5" style="display: none;">Treść zakładki 5</div>
      </div></td>
    </tr>
  </tbody>
</table>
</body>
</html>


Tak nic nie działa.
Quantum
9.07.2009, 10:25:35
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(bookmarkId)
        {
          var lastTab = document.getElementById("active").innerHTML;
          document.getElementById('content' + lastTab).style.display = 'none';
          document.getElementById('content' + bookmarkId).style.display = 'block';
          document.getElementById('bookmark' + lastTab).className = 'normal';
          document.getElementById('bookmark' + bookmarkId).className = 'active';
          document.getElementById('active').innerHTML = bookmarkId;
        }
        </script>
      </head>
      <body>
      <table cellspacing="0" cellpadding="0">
        <tbody>
          <tr>
            <td class="padding">&nbsp;</td>
            <td><div id="setContent"><p class="active" id="bookmark1"><a href="javascript:display(1)">Zakładka 1</a></p></div></td>
            <td class="padding">&nbsp;</td>
            <td><div id="setContent"><p class="normal" id="bookmark2"><a href="javascript:display(2)">Zakładka 2</a></p></div></td>
            <td class="padding">&nbsp;</td>
            <td><div id="setContent"><p class="normal" id="bookmark3"><a href="javascript:display(3)">Zakładka 3</a></p></div></td>
            <td class="padding">&nbsp;</td>
            <td><div id="setContent"><p class="normal" id="bookmark4"><a href="javascript:display(4)">Zakładka 4</a></p></div></td>
            <td class="padding">&nbsp;</td>
            <td><div id="setContent"><p class="normal" id="bookmark5"><a href="javascript:display(5)">Zakładka 5</a></p></div></td>
            <td class="padding">&nbsp;</td>
          </tr>
          <tr>
            <td colspan="11"><div id="content">
            <div id="content1" style="display: block;">Treść zakładki 1</div>
            <div id="content2" style="display: none;">Treść zakładki 2</div>
            <div id="content3" style="display: none;">Treść zakładki 3</div>
            <div id="content4" style="display: none;">Treść zakładki 4</div>
            <div id="content5" style="display: none;">Treść zakładki 5</div>
            </div>
            <div id="active" style="display:none;">1</div>
            
            </td>
          </tr>
        </tbody>
      </table>
      </body>
      </html>


Cytat
document.getElementById('bookmark' + lastTab).parent.className = 'normal';
document.getElementById('bookmark' + bookmarkId).parent.className = 'active';

wystarczyło usunąć .parent i dodać 
[HTML] pobierz, plaintext 
  1. <div id="active" style="display:none;">1</div>
[HTML] pobierz, plaintext


BTW. zmień tak jak Ci mówiłem id na class (padding) i w stylu zamiast td#padding daj td.padding, już nie wspominając o tym, że tabelki nie do tego służą..
zavada
9.07.2009, 21:48:32
Bardzo Ci dziękuję smile.gif Działa.
P.S. Gdybym mógł to dałbym Ci dwa punkty pomógł winksmiley.jpg
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.