Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Ukrywanie i pokazywanie bloków
Forum PHP.pl > Forum > Przedszkole
david8213
4.04.2019, 20:02:58
Jak ukryć blok tabcontent2 jesli zostanie wciśnięty jeden z buttonów 

[XML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <style>
  6. body {
  7. font-family: Arial; margin: 0;
  8. }
  9.  
  10. /* Style the tab */
  11. .tab {
  12.   width: 100%;
  13.   margin: auto;
  14.   position: fixed;
  15.   margin-top: 0em;
  16.   overflow: hidden;
  17.   border: 1px solid #ccc;
  18.   background-color: #f1f1f1;
  19. }
  20.  
  21. /* Style the buttons inside the tab */
  22. .tab button {
  23.   background-color: inherit;
  24.   float: left;
  25.   border: none;
  26.   outline: none;
  27.   cursor: pointer;
  28.   padding: 14px 16px;
  29.   transition: 0.3s;
  30.   font-size: 17px;
  31. }
  32.  
  33. /* Change background color of buttons on hover */
  34. .tab button:hover {
  35.   background-color: #ddd;
  36. }
  37.  
  38. /* Create an active/current tablink class */
  39. .tab button.active {
  40. //  background-color: #ccc;
  41. }
  42.  
  43. /* Style the tab content */
  44. .tabcontent {
  45.   display: none;
  46.   padding: 6px 12px;
  47.   border: 1px solid #ccc;
  48.   border-top: none;
  49. }
  50.  
  51. .tabcontent2 {
  52.   display: block;
  53.   padding: 6px 12px;
  54.   border: 1px solid #ccc;
  55.   border-top: none;
  56.  
  57. }
  58.  
  59. </style>
  60. </head>
  61. <body>
  62.  
  63. <div class="tab">
  64.   <button class="tablinks1" onclick="openCity(event, 'London')">London</button>
  65.   <button class="tablinks2" onclick="openCity(event, 'Paris')">Paris</button>
  66.   <button class="tablinks3" onclick="openCity(event, 'Tokyo')">Tokyo</button>
  67.   <button class="tablinks4" onclick="openCity(event, 'Warszawa')">Warszawa</button>
  68. </div>
  69.  
  70. <div id="London" class="tabcontent"><br><br><br>
  71.   <h3>London</h3>
  72.   <p>London is the capital city of England.</p>
  73. </div>
  74.  
  75. <div id="Paris" class="tabcontent"><br><br><br>
  76.   <h3>Paris</h3>
  77.   <p>Paris is the capital of France.</p> 
  78. </div>
  79.  
  80. <div id="Tokyo" class="tabcontent"><br><br><br>
  81.   <h3>Tokyo</h3>
  82.   <p>Tokyo is the capital of Japan.</p>
  83. </div>
  84.  
  85. <div id="Warszawa" class="tabcontent"><br><br><br>
  86.   <h3>Warszawa</h3>
  87.   <p>Warszawa is the capital of Poland.</p>
  88. </div>
  89.  
  90. <div  class="tabcontent2">
  91. <br><br><br><br>Ten tekst ma zostać ukryty jeśli zostanie wciśnięty jeden z przycisków z powyższego MEN
  92. </div>
  93.  
  94. <script>
  95. function openCity(evt, cityName) {
  96.   var i, tabcontent, tabcontent2, tablinks;
  97.   tabcontent = document.getElementsByClassName("tabcontent");
  98.   tabcontent2 = document.getElementsByClassName("tabcontent2");
  99.   for (i = 0; i < tabcontent.length; i++) {
  100.     tabcontent[i].style.display = "none";
  101.  
  102.   }
  103.   tablinks = document.getElementsByClassName("tablinks");
  104.   for (i = 0; i < tablinks.length; i++) {
  105.     tablinks[i].className = tablinks[i].className.replace(" active", "");
  106.   }
  107.   document.getElementById(cityName).style.display = "block";
  108.   evt.currentTarget.className += " active";
  109.  
  110. }
  111.  
  112.  
  113. </body>
  114. </html>
[XML] pobierz, plaintext


Próbowałem jak ponizej ale coś nie działa

[XML] pobierz, plaintext 
  1. <script>
  2. function openCity(evt, cityName) {
  3.   var i, tabcontent, tablinks;
  4.   tabcontent = document.getElementsByClassName("tabcontent");
  5.   for (i = 0; i < tabcontent.length; i++) {
  6.     tabcontent[i].style.display = "none";
  7.   }
  8.   tablinks = document.getElementsByClassName("tablinks");
  9.   for (i = 0; i < tablinks.length; i++) {
  10.     tablinks[i].className = tablinks[i].className.replace(" active", "");
  11.   }
  12.   document.getElementById(cityName).style.display = "block";
  13.   evt.currentTarget.className += " active";
  14.  
  15.  
  16.   var x = document.getElementsByClassName("tabcontent2");
  17.   if (tabcontent[i].style.display === "block") {
  18.     x.style.display = "none";
  19.   } else {
  20.     x.style.display = "none";
  21.   }
  22.  
  23.  
  24.  
  25.  
  26. }
  27. </script>
  28.  
[XML] pobierz, plaintext
emillo91
8.04.2019, 20:21:27
Nie widzę nigdzie u Ciebie iterowania po wszystkich elementach tabcontent2. Robiłeś już coś podobnego na elementach przechowywanych w zmiennej tablinks. Musisz odnieść się w ten sam sposób dla elementów, które chcesz ukryć. Proponowałbym zainteresować się jquery gdyż dużo możesz zaoszczędzić czasu przy odnoszeniu się do elementów. Przykład:

W java script:
[JAVASCRIPT] pobierz, plaintext 
  1. var tabcontent = document.getElementsByClassName("tabcontent");
  2.  for (i = 0; i < tabcontent.length; i++) {
  3.           tabcontent[i].style.display = "none";
  4.         }
[JAVASCRIPT] pobierz, plaintext


W Jquery:
[JAVASCRIPT] pobierz, plaintext 
  1. var tabcontent = $('.tabcontent');
  2. tabcontent.hide();
[JAVASCRIPT] pobierz, plaintext
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-2024 Invision Power Services, Inc.