Jump to content

DavDup

Members
  • Posts

    3
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

DavDup's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. DavDup

    Nested TABs

    Ok I found the problem!! Everything was working perfectly... I jus forgot two elements with the "tablink2" class in another forgotten part of the code, which was messing up the counter... silly me.
  2. DavDup

    Nested TABs

    I made some more tries, and the behavior is really really strange!! The problem is only on the second occurrence of the tabbed <div> (the first one is working perfectly fine), and the only affected tabs are the two last ones, and the only part of the function which is not working properly is the removal of the coloring class (replace by "")... does it have something to do with the variables inside the function, not being reinitialized or something?? Any help would be greatly appreciated! Thanks David
  3. DavDup

    Nested TABs

    Hi! I am trying to build some interface using tabs, and I would like to nest tabs into another one. I am using this w3 code as a base: function openCity(evt, cityName) { var i, x, tablinks; x = document.getElementsByClassName("city"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < x.length; i++) { tablinks[i].className = tablinks[i].className.replace(" w3-red", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " w3-red"; } and I modified it to: function openTab(evt, tabBarName, tabName, tablinkName) { var i, x, tablinks; x = document.getElementsByClassName(tabBarName); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } tablinks = document.getElementsByClassName(tablinkName); for (i = 0; i < x.length; i++) { tablinks[i].className = tablinks[i].className.replace(" w3-light-gray", ""); } document.getElementById(tabName).style.display = "block"; evt.currentTarget.className += " w3-light-gray"; } It works almost good. If I try this code in the tryit editor, everything is fine, but in my project, the last part of the function where the " w3-light-gray" part is removed from the className is not working properly, and some tabs does not have this part removed (in other words, they remain "selected" in light gray, and each time I click on them, another " w3-light-gray" class is added, with the previous one still there... Any idea where this could come from?? The HTML code I tested is: <!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-container"> <h2>Active Tabs</h2> <p>To highlight the current tab/page the user is on, add a color class, and use JavaScript to update the active link.</p> <div class="w3-bar w3-black"> <button class="w3-bar-item w3-button tablink w3-red" onclick="openCity(event,'city','London','tablink')">London</button> <button class="w3-bar-item w3-button tablink" onclick="openCity(event,'city','Paris', 'tablink')">Paris</button> <button class="w3-bar-item w3-button tablink" onclick="openCity(event,'city','Tokyo','tablink')">Tokyo</button> </div> <div id="London" class="w3-container w3-border city"> <div class="w3-bar w3-black"> <button class="w3-bar-item w3-button tablink3 w3-red" onclick="openCity(event,'city3','London3','tablink3')">London</button> <button class="w3-bar-item w3-button tablink3" onclick="openCity(event,'city3','Paris3','tablink3')">Paris</button> <button class="w3-bar-item w3-button tablink3" onclick="openCity(event,'city3','toto3','tablink3')">toto</button> <button class="w3-bar-item w3-button tablink3" onclick="openCity(event,'city3','titi3','tablink3')">titi</button> </div> <div id="London3" class="w3-container w3-border city3"> <h2>London2</h2> </div> <div id="Paris3" class="w3-container w3-border city3" style="display:none"> <h2>Paris</h2> <p>Paris is the capital of France.</p> </div> <div id="toto3" class="w3-container w3-border city3" style="display:none"> <h2>toto</h2> <p>Paris is the capital of France.</p> </div> <div id="titi3" class="w3-container w3-border city3" style="display:none"> <h2>titi</h2> <p>Paris is the capital of France.</p> </div> </div> <div id="Paris" class="w3-container w3-border city" style="display:none"> <h2>Paris</h2> <p>Paris is the capital of France.</p> </div> <div id="Tokyo" class="w3-container w3-border city" style="display:none"> <div class="w3-bar w3-black"> <button class="w3-bar-item w3-button tablink2 w3-red" onclick="openCity(event,'city2','London2','tablink2')">London</button> <button class="w3-bar-item w3-button tablink2" onclick="openCity(event,'city2','Paris2','tablink2')">Paris</button> <button class="w3-bar-item w3-button tablink2" onclick="openCity(event,'city2','toto','tablink2')">toto</button> <button class="w3-bar-item w3-button tablink2" onclick="openCity(event,'city2','titi','tablink2')">titi</button> </div> <div id="London2" class="w3-container w3-border city2"> <h2>London2</h2> </div> <div id="Paris2" class="w3-container w3-border city2" style="display:none"> <h2>Paris</h2> <p>Paris is the capital of France.</p> </div> <div id="toto" class="w3-container w3-border city2" style="display:none"> <h2>toto</h2> <p>Paris is the capital of France.</p> </div> <div id="titi" class="w3-container w3-border city2" style="display:none"> <h2>titi</h2> <p>Paris is the capital of France.</p> </div> </div> </div> <script> function openCity(evt, tabBarName, cityName, tablinkName) { var i, x, tablinks; x = document.getElementsByClassName(tabBarName); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } tablinks = document.getElementsByClassName(tablinkName); for (i = 0; i < x.length; i++) { tablinks[i].className = tablinks[i].className.replace(" w3-red", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " w3-red"; } </script> </body> </html> Side note: The HTML code (what's inside the BODY is embedded into another page using another w3 function that I found here: https://www.w3schools.com/howto/howto_html_include.asp perhaps it has something to do with this strange behavior... Thanks for your help! David
×
×
  • Create New...