Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Dynamiczne zakładki - nie działają 2 panele na raz
Forum PHP.pl > Forum > PHP
Diego22
11.05.2012, 21:26:58
Witam buduję Stronę na php-fusion , chciałem dodać 2 panele po prawej z stronie z dynamicznymi zakładkami , jak jest tylko jeden panel włączony to wszystko jet ok , problem pojawia się gdy włącze 2 panel , to wtedy już nie działa. Jak klikam w zakładki w drugim panelu , to zawartość ich zmienia się w pierwszym , mimo że nie klikałem w nim. Jak to rowiązać ? Oto kod :
Kod
openside("Klasyfikacje"); ?>

    <script>
    //<![CDATA[
    function pokazdiv(el) {
    for(var i=1; i<=3; i++) {
    if(el == i) {
    document.getElementById(el).style.display = "block";
    }else{
    document.getElementById(i).style.display = "none";
    }
    }
    }
    //]]>
    </script>
    
    
    
    
    <a href="java script:void(0);" onclick="pokazdiv('1');">Galeria</a>
    <a href="java script:void(0);" onclick="pokazdiv('2');">Filmy</a>
    <a href="java script:void(0);" onclick="pokazdiv('3');">Ogolne</a>
    
    <div id="1">jeden</div>
    <div id="2" style="display:none">dwa</div>
    <div id="3" style="display:none">trzy</div>



<?php closeside();
morbic
11.05.2012, 21:39:55
ID każdego DIVa musi być unikatowe dla całego dokumentu HTML.

Najlepiej zrobić:

[HTML] pobierz, plaintext 
  1. <script>
  2. //<![CDATA[
  3. function pokazdiv(el, panel) {
  4.     for(var i=1; i<=3; i++) {
  5.         if(el == i) {
  6.             document.getElementById(panel+'_'+el).style.display = "block";
  7.         }else{
  8.             document.getElementById(panel+'_'+i).style.display = "none";
  9.         }
  10.     }
  11.     return false;
  12. }
  13. //]]>
  14. </script>
  15.  
  16. <a href="#" onclick="return pokazdiv('1', 'panel1');">Galeria</a>
  17. <a href="#" onclick="return pokazdiv('2', 'panel1');">Filmy</a>
  18. <a href="#" onclick="return pokazdiv('3', 'panel1');">Ogolne</a>
  19.  
  20. <div id="panel1_1">jeden</div>
  21. <div id="panel1_2" style="display:none">dwa</div>
  22. <div id="panel1_3" style="display:none">trzy</div>
[HTML] pobierz, plaintext


Dla kolejnych paneli zmieniasz tylko drugi parametr funkcji pokazdiv() i pierwszy człon id wszystkich divów w panelu.
Diego22
11.05.2012, 21:48:29
hmm a w tym panelu jak będzie ?
zmieniłem id ale nie działały oba ;/
kod:
[PHP] pobierz, plaintext 
  1. openside("Klasyfikacje"); ?> 
  2.  
  3. <script>
  4. //<![CDATA[
  5. function pokazdiv(el) {
  6. for(var i=1; i<=3; i++) {
  7. if(el == i) {
  8. document.getElementById(el).style.display = "block";
  9. }else{
  10. document.getElementById(i).style.display = "none";
  11. }
  12. }
  13. }
  14. //]]>
  15. </script>
  16.  
  17. <center>
  18. <b>
  19. <a href="java script:void(0);" onclick="pokazdiv('1');">Kierowców</a> |
  20. <a href="java script:void(0);" onclick="pokazdiv('2');">Konstruktorów</a>
  21. </b>
  22. </center>
  23. <div id="1" style="display: block; ">
  24. <br><b><center>Klasyfikacja Kierowców</center></b><br>
  25. <center><table style=' text-align: left; width: 261px; height: 119px;'
  26. background='http://rfleague.xaa.pl/themes/Liga2011/images/Strona2/tlokla.png'
  27. border='0' cellpadding='0' cellspacing='0'>
  28. <tbody>
  29. <tr>
  30. <td style='vertical-align: top; font-weight: bold;
  31. text-align: center; width: 60px; color: rgb(255, 255,
  32. 255);'>1.<br>
  33. </td>
  34. <td style='vertical-align: top; width: 150px; height:
  35. 25px; color: rgb(255, 255, 255); font-weight: bold;
  36. text-align: center;'>&nbsp;&nbsp; nick &nbsp;&nbsp; <br>
  37. </td>
  38. <td style='vertical-align: top; font-weight: bold;
  39. text-align: left; color: rgb(255, 255, 255);'>0<br>
  40. </td>
  41. </tr>
  42. <tr>
  43. <td style='vertical-align: top; font-weight: bold;
  44. text-align: center; color: rgb(255, 255, 255);'>2.<br>
  45. </td>
  46. <td style=' vertical-align: top; color: rgb(255, 255,
  47. 255); font-weight: bold; text-align: center; width:
  48. 150px;'>nick<br>
  49. </td>
  50. <td style='vertical-align: top; height: 23px; font-weight:
  51. bold; text-align: left; color: rgb(255, 255, 255);'>0<br>
  52. </td>
  53. </tr>
  54. <tr>
  55. <td style='vertical-align: top; font-weight: bold;
  56. text-align: center; color: rgb(255, 255, 255);'>3.<br>
  57. </td>
  58. <td style='vertical-align: top; color: rgb(255, 255, 255);
  59. font-weight: bold; text-align: center;'>nick<br>
  60. </td>
  61. <td style='vertical-align: top; height: 23px; font-weight:
  62. bold; text-align: left; color: rgb(255, 255, 255);'>0<br>
  63. </td>
  64. </tr>
  65. <tr>
  66. <td style='vertical-align: top; font-weight: bold;
  67. text-align: center; color: rgb(255, 255, 255);'>4.<br>
  68. </td>
  69. <td style='vertical-align: top; color: rgb(255, 255, 255);
  70. font-weight: bold; text-align: center;'>nick<br>
  71. </td>
  72. <td style='vertical-align: top; height: 23px; font-weight:
  73. bold; text-align: left; color: rgb(255, 255, 255);'>0<br>
  74. </td>
  75. </tr>
  76. <tr>
  77. <td style=' vertical-align: top; font-weight: bold;
  78. text-align: center; color: rgb(255, 255, 255);'>5.<br>
  79. </td>
  80. <td style='vertical-align: top; color: rgb(255, 255, 255);
  81. font-weight: bold; text-align: center;'>nick<br>
  82. </td>
  83. <td style='vertical-align: top; height: 23px; font-weight:
  84. bold; text-align: left; color: rgb(255, 255, 255);'>0<br>
  85. </td>
  86. </tr>
  87. </tbody>
  88. </table></center>
  89. <b><center><a href='http://rfleague.xaa.pl/viewpage.php?page_id=1' >pełna</a></center></b>
  90. </div>
  91.  
  92.  
  93. <div id="2" style="display: none; ">
  94. <br><b><center>Klasyfikacja Konstruktorów</center></b><br>
  95. <center><table style=' text-align: left; width: 261px; height: 119px;'
  96. background='http://rfleague.xaa.pl/themes/Liga2011/images/Strona2/tlokla.png'
  97. border='0' cellpadding='0' cellspacing='0'>
  98. <tbody>
  99. <tr>
  100. <td style='vertical-align: top; font-weight: bold;
  101. text-align: center; width: 60px; color: rgb(255, 255,
  102. 255);'>1.<br>
  103. </td>
  104. <td style='vertical-align: top; width: 150px; height:
  105. 25px; color: rgb(255, 255, 255); font-weight: bold;
  106. text-align: center;'>&nbsp;&nbsp; RedBull &nbsp;&nbsp; <br>
  107. </td>
  108. <td style='vertical-align: top; font-weight: bold;
  109. text-align: left; color: rgb(255, 255, 255);'>0<br>
  110. </td>
  111. </tr>
  112. <tr>
  113. <td style='vertical-align: top; font-weight: bold;
  114. text-align: center; color: rgb(255, 255, 255);'>2.<br>
  115. </td>
  116. <td style=' vertical-align: top; color: rgb(255, 255,
  117. 255); font-weight: bold; text-align: center; width:
  118. 150px;'>McLaren<br>
  119. </td>
  120. <td style='vertical-align: top; height: 23px; font-weight:
  121. bold; text-align: left; color: rgb(255, 255, 255);'>0<br>
  122. </td>
  123. </tr>
  124. <tr>
  125. <td style='vertical-align: top; font-weight: bold;
  126. text-align: center; color: rgb(255, 255, 255);'>3.<br>
  127. </td>
  128. <td style='vertical-align: top; color: rgb(255, 255, 255);
  129. font-weight: bold; text-align: center;'>Mercedes<br>
  130. </td>
  131. <td style='vertical-align: top; height: 23px; font-weight:
  132. bold; text-align: left; color: rgb(255, 255, 255);'>0<br>
  133. </td>
  134. </tr>
  135. <tr>
  136. <td style='vertical-align: top; font-weight: bold;
  137. text-align: center; color: rgb(255, 255, 255);'>4.<br>
  138. </td>
  139. <td style='vertical-align: top; color: rgb(255, 255, 255);
  140. font-weight: bold; text-align: center;'>Ferrari<br>
  141. </td>
  142. <td style='vertical-align: top; height: 23px; font-weight:
  143. bold; text-align: left; color: rgb(255, 255, 255);'>0<br>
  144. </td>
  145. </tr>
  146. <tr>
  147. <td style=' vertical-align: top; font-weight: bold;
  148. text-align: center; color: rgb(255, 255, 255);'>5.<br>
  149. </td>
  150. <td style='vertical-align: top; color: rgb(255, 255, 255);
  151. font-weight: bold; text-align: center;'>Sahara<br>
  152. </td>
  153. <td style='vertical-align: top; height: 23px; font-weight:
  154. bold; text-align: left; color: rgb(255, 255, 255);'>0<br>
  155. </td>
  156. </tr>
  157. </tbody>
  158. </table></center>
  159. <b><center><a href='http://rfleague.xaa.pl/viewpage.php?page_id=7' >pełna</a></center></b>
  160.  
  161.  
  162.  
  163.     </div>
  164.  
  165. <?php closeside();
[PHP] pobierz, plaintext
morbic
11.05.2012, 21:57:39
Przeczytaj jeszcze raz kod, który napisałem i porównaj go ze swoim. W kodzie, który wkleiłeś przed chwilą nic nie jest zmienione.
Diego22
11.05.2012, 22:26:07
To jak w pierwszym panelu mam kod taki jak wyżej post co dodałem a w , drugim dodam taki :
Kod
openside("Klasyfikacje"); ?>

   <script>
    //<![CDATA[
    function pokazdiv(el, panel) {
    for(var i=1; i<=3; i++) {
    if(el == i) {
    document.getElementById(panel+'_'+el).style.display = "block";
    }else{
    document.getElementById(panel+'_'+i).style.display = "none";
    }
    }
    return false;
    }
    //]]>
    </script>
    
    <a href="#" onclick="return pokazdiv('1', 'panel1');">Galeria</a>
    <a href="#" onclick="return pokazdiv('2', 'panel1');">Filmy</a>
    
    
<div id="panel1_1" style="display: block; ">
<br><b><center>Klasyfikacja Kierowców</center></b><br>
<center><table style=' text-align: left; width: 261px; height: 119px;'
background='http://rfleague.xaa.pl/themes/Liga2011/images/Strona2/tlokla.png'
border='0' cellpadding='0' cellspacing='0'>
<tbody>
<tr>
<td style='vertical-align: top; font-weight: bold;
text-align: center; width: 60px; color: rgb(255, 255,
255);'>1.<br>
</td>
<td style='vertical-align: top; width: 150px; height:
25px; color: rgb(255, 255, 255); font-weight: bold;
text-align: center;'>   nick    <br>
</td>
<td style='vertical-align: top; font-weight: bold;
text-align: left; color: rgb(255, 255, 255);'>0<br>
</td>
</tr>
<tr>
<td style='vertical-align: top; font-weight: bold;
text-align: center; color: rgb(255, 255, 255);'>2.<br>
</td>
<td style=' vertical-align: top; color: rgb(255, 255,
255); font-weight: bold; text-align: center; width:
150px;'>nick<br>
</td>
<td style='vertical-align: top; height: 23px; font-weight:
bold; text-align: left; color: rgb(255, 255, 255);'>0<br>
</td>
</tr>
<tr>
<td style='vertical-align: top; font-weight: bold;
text-align: center; color: rgb(255, 255, 255);'>3.<br>
</td>
<td style='vertical-align: top; color: rgb(255, 255, 255);
font-weight: bold; text-align: center;'>nick<br>
</td>
<td style='vertical-align: top; height: 23px; font-weight:
bold; text-align: left; color: rgb(255, 255, 255);'>0<br>
</td>
</tr>
<tr>
<td style='vertical-align: top; font-weight: bold;
text-align: center; color: rgb(255, 255, 255);'>4.<br>
</td>
<td style='vertical-align: top; color: rgb(255, 255, 255);
font-weight: bold; text-align: center;'>nick<br>
</td>
<td style='vertical-align: top; height: 23px; font-weight:
bold; text-align: left; color: rgb(255, 255, 255);'>0<br>
</td>
</tr>
<tr>
<td style=' vertical-align: top; font-weight: bold;
text-align: center; color: rgb(255, 255, 255);'>5.<br>
</td>
<td style='vertical-align: top; color: rgb(255, 255, 255);
font-weight: bold; text-align: center;'>nick<br>
</td>
<td style='vertical-align: top; height: 23px; font-weight:
bold; text-align: left; color: rgb(255, 255, 255);'>0<br>
</td>
</tr>
</tbody>
</table></center>
<b><center><a href='http://rfleague.xaa.pl/viewpage.php?page_id=1' >pełna</a></center></b>
</div>


<div id="panel1_2" style="display: none; ">
<br><b><center>Klasyfikacja Konstruktorów</center></b><br>
<center><table style=' text-align: left; width: 261px; height: 119px;'
background='http://rfleague.xaa.pl/themes/Liga2011/images/Strona2/tlokla.png'
border='0' cellpadding='0' cellspacing='0'>
<tbody>
<tr>
<td style='vertical-align: top; font-weight: bold;
text-align: center; width: 60px; color: rgb(255, 255,
255);'>1.<br>
</td>
<td style='vertical-align: top; width: 150px; height:
25px; color: rgb(255, 255, 255); font-weight: bold;
text-align: center;'>   RedBull    <br>
</td>
<td style='vertical-align: top; font-weight: bold;
text-align: left; color: rgb(255, 255, 255);'>0<br>
</td>
</tr>
<tr>
<td style='vertical-align: top; font-weight: bold;
text-align: center; color: rgb(255, 255, 255);'>2.<br>
</td>
<td style=' vertical-align: top; color: rgb(255, 255,
255); font-weight: bold; text-align: center; width:
150px;'>McLaren<br>
</td>
<td style='vertical-align: top; height: 23px; font-weight:
bold; text-align: left; color: rgb(255, 255, 255);'>0<br>
</td>
</tr>
<tr>
<td style='vertical-align: top; font-weight: bold;
text-align: center; color: rgb(255, 255, 255);'>3.<br>
</td>
<td style='vertical-align: top; color: rgb(255, 255, 255);
font-weight: bold; text-align: center;'>Mercedes<br>
</td>
<td style='vertical-align: top; height: 23px; font-weight:
bold; text-align: left; color: rgb(255, 255, 255);'>0<br>
</td>
</tr>
<tr>
<td style='vertical-align: top; font-weight: bold;
text-align: center; color: rgb(255, 255, 255);'>4.<br>
</td>
<td style='vertical-align: top; color: rgb(255, 255, 255);
font-weight: bold; text-align: center;'>Ferrari<br>
</td>
<td style='vertical-align: top; height: 23px; font-weight:
bold; text-align: left; color: rgb(255, 255, 255);'>0<br>
</td>
</tr>
<tr>
<td style=' vertical-align: top; font-weight: bold;
text-align: center; color: rgb(255, 255, 255);'>5.<br>
</td>
<td style='vertical-align: top; color: rgb(255, 255, 255);
font-weight: bold; text-align: center;'>Sahara<br>
</td>
<td style='vertical-align: top; height: 23px; font-weight:
bold; text-align: left; color: rgb(255, 255, 255);'>0<br>
</td>
</tr>
</tbody>
</table></center>
<b><center><a href='http://rfleague.xaa.pl/viewpage.php?page_id=7' >pełna</a></center></b>
    


    </div>

<?php closeside();


To mi wogule nie działa wtedy pierwszy panel
morbic
11.05.2012, 22:50:21
Bo funkcja pokazdiv() nie może być zdefiniowana dwa razy.
Diego22
12.05.2012, 13:03:07
to teraz co mam z tym zrobić ?

pomoże ktoś ?
Lwik
12.05.2012, 13:08:34
Hmm, tylko, że błędu nie masz w tym kodzie. Wrzuć sobie go jako czystą stronę.

[HTML] pobierz, plaintext 
  1.    <script>
  2.     //<![CDATA[
  3.     function pokazdiv(el, panel) {
  4.     for(var i=1; i<=3; i++) {
  5.     if(el == i) {
  6.     document.getElementById(panel+'_'+el).style.display = "block";
  7.     }else{
  8.     document.getElementById(panel+'_'+i).style.display = "none";
  9.     }
  10.     }
  11.     return false;
  12.     }
  13.     //]]>
  14.     </script>
  15.  
  16.     <a href="#" onclick="return pokazdiv('1', 'panel1');">Galeria</a>
  17.     <a href="#" onclick="return pokazdiv('2', 'panel1');">Filmy</a>
  18.  
  19.  
  20. <div id="panel1_1" style="display: block; ">
  21. <br><b><center>Klasyfikacja Kierowców</center></b><br>
  22. <center><table style=' text-align: left; width: 261px; height: 119px;'
  23. background='http://rfleague.xaa.pl/themes/Liga2011/images/Strona2/tlokla.png'
  24. border='0' cellpadding='0' cellspacing='0'>
  25. <tbody>
  26. <tr>
  27. <td style='vertical-align: top; font-weight: bold;
  28. text-align: center; width: 60px; color: rgb(255, 255,
  29. 255);'>1.<br>
  30. </td>
  31. <td style='vertical-align: top; width: 150px; height:
  32. 25px; color: rgb(255, 255, 255); font-weight: bold;
  33. text-align: center;'>   nick    <br>
  34. </td>
  35. <td style='vertical-align: top; font-weight: bold;
  36. text-align: left; color: rgb(255, 255, 255);'>0<br>
  37. </td>
  38. </tr>
  39. <tr>
  40. <td style='vertical-align: top; font-weight: bold;
  41. text-align: center; color: rgb(255, 255, 255);'>2.<br>
  42. </td>
  43. <td style=' vertical-align: top; color: rgb(255, 255,
  44. 255); font-weight: bold; text-align: center; width:
  45. 150px;'>nick<br>
  46. </td>
  47. <td style='vertical-align: top; height: 23px; font-weight:
  48. bold; text-align: left; color: rgb(255, 255, 255);'>0<br>
  49. </td>
  50. </tr>
  51. <tr>
  52. <td style='vertical-align: top; font-weight: bold;
  53. text-align: center; color: rgb(255, 255, 255);'>3.<br>
  54. </td>
  55. <td style='vertical-align: top; color: rgb(255, 255, 255);
  56. font-weight: bold; text-align: center;'>nick<br>
  57. </td>
  58. <td style='vertical-align: top; height: 23px; font-weight:
  59. bold; text-align: left; color: rgb(255, 255, 255);'>0<br>
  60. </td>
  61. </tr>
  62. <tr>
  63. <td style='vertical-align: top; font-weight: bold;
  64. text-align: center; color: rgb(255, 255, 255);'>4.<br>
  65. </td>
  66. <td style='vertical-align: top; color: rgb(255, 255, 255);
  67. font-weight: bold; text-align: center;'>nick<br>
  68. </td>
  69. <td style='vertical-align: top; height: 23px; font-weight:
  70. bold; text-align: left; color: rgb(255, 255, 255);'>0<br>
  71. </td>
  72. </tr>
  73. <tr>
  74. <td style=' vertical-align: top; font-weight: bold;
  75. text-align: center; color: rgb(255, 255, 255);'>5.<br>
  76. </td>
  77. <td style='vertical-align: top; color: rgb(255, 255, 255);
  78. font-weight: bold; text-align: center;'>nick<br>
  79. </td>
  80. <td style='vertical-align: top; height: 23px; font-weight:
  81. bold; text-align: left; color: rgb(255, 255, 255);'>0<br>
  82. </td>
  83. </tr>
  84. </tbody>
  85. </table></center>
  86. <b><center><a href='http://rfleague.xaa.pl/viewpage.php?page_id=1' >pełna</a></center></b>
  87. </div>
  88.  
  89.  
  90. <div id="panel1_2" style="display: none; ">
  91. <br><b><center>Klasyfikacja Konstruktorów</center></b><br>
  92. <center><table style=' text-align: left; width: 261px; height: 119px;'
  93. background='http://rfleague.xaa.pl/themes/Liga2011/images/Strona2/tlokla.png'
  94. border='0' cellpadding='0' cellspacing='0'>
  95. <tbody>
  96. <tr>
  97. <td style='vertical-align: top; font-weight: bold;
  98. text-align: center; width: 60px; color: rgb(255, 255,
  99. 255);'>1.<br>
  100. </td>
  101. <td style='vertical-align: top; width: 150px; height:
  102. 25px; color: rgb(255, 255, 255); font-weight: bold;
  103. text-align: center;'>   RedBull    <br>
  104. </td>
  105. <td style='vertical-align: top; font-weight: bold;
  106. text-align: left; color: rgb(255, 255, 255);'>0<br>
  107. </td>
  108. </tr>
  109. <tr>
  110. <td style='vertical-align: top; font-weight: bold;
  111. text-align: center; color: rgb(255, 255, 255);'>2.<br>
  112. </td>
  113. <td style=' vertical-align: top; color: rgb(255, 255,
  114. 255); font-weight: bold; text-align: center; width:
  115. 150px;'>McLaren<br>
  116. </td>
  117. <td style='vertical-align: top; height: 23px; font-weight:
  118. bold; text-align: left; color: rgb(255, 255, 255);'>0<br>
  119. </td>
  120. </tr>
  121. <tr>
  122. <td style='vertical-align: top; font-weight: bold;
  123. text-align: center; color: rgb(255, 255, 255);'>3.<br>
  124. </td>
  125. <td style='vertical-align: top; color: rgb(255, 255, 255);
  126. font-weight: bold; text-align: center;'>Mercedes<br>
  127. </td>
  128. <td style='vertical-align: top; height: 23px; font-weight:
  129. bold; text-align: left; color: rgb(255, 255, 255);'>0<br>
  130. </td>
  131. </tr>
  132. <tr>
  133. <td style='vertical-align: top; font-weight: bold;
  134. text-align: center; color: rgb(255, 255, 255);'>4.<br>
  135. </td>
  136. <td style='vertical-align: top; color: rgb(255, 255, 255);
  137. font-weight: bold; text-align: center;'>Ferrari<br>
  138. </td>
  139. <td style='vertical-align: top; height: 23px; font-weight:
  140. bold; text-align: left; color: rgb(255, 255, 255);'>0<br>
  141. </td>
  142. </tr>
  143. <tr>
  144. <td style=' vertical-align: top; font-weight: bold;
  145. text-align: center; color: rgb(255, 255, 255);'>5.<br>
  146. </td>
  147. <td style='vertical-align: top; color: rgb(255, 255, 255);
  148. font-weight: bold; text-align: center;'>Sahara<br>
  149. </td>
  150. <td style='vertical-align: top; height: 23px; font-weight:
  151. bold; text-align: left; color: rgb(255, 255, 255);'>0<br>
  152. </td>
  153. </tr>
  154. </tbody>
  155. </table></center>
  156. <b><center><a href='http://rfleague.xaa.pl/viewpage.php?page_id=7' >pełna</a></center></b>
  157.  
  158.  
  159.  
  160.     </div>
[HTML] pobierz, plaintext

Obstawiam, że Firebug nie zwróci nic niepożądanego.
Co do elementu z którym się gryzie - zgubiłem szklaną kulę, bez wpisu z firebuga / linku do strony nie jestem w stanie nic zlokalizować.
Diego22
12.05.2012, 15:47:07
1 panel działa jak dam 2 to już nic ;/

mam podać link do www?
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.