Jump to content

Nested TABs


DavDup
 Share

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...