如何隐藏其他选项卡的内容并仅显示所选选项卡的内容

Question

When I click on a particular tab the other tabs's content should be hidden but it is not hiding. This is all the code I have.

 function showStuff(id) { if (document.getElementById(id).style.display === "block") { document.getElementById(id).style.display = "none"; } else { document.getElementById(id).style.display = "block"; } } 

 <ul class="side bar tabs"> <li id="tabs1" onclick="showStuff('tabs-1')">City</li> <li id="tabs2" onclick="showStuff('tabs-2')">Country</li> <li id="tabs3" onclick="showStuff('tabs-3')">Humanity</li> </ul> <div id="tabs-1" style="display : none"> <p>Proin elit m</p> </div> <div id="tabs-2" style="display : none"> <p>M massa ut d</p> </div> <div id="tabs-3" style="display : none"> <p> sodales.</p> </div> 

Answer 1

Giving all the tab content elements a common CSS class makes selecting and styling them much easier, for example in this demo and code below.

CSS

.tabContent {
    display:none;
}

JavaScript

function showStuff(element)  {
    var tabContents = document.getElementsByClassName('tabContent');
    for (var i = 0; i < tabContents.length; i++) { 
        tabContents[i].style.display = 'none';
    }

    // change tabsX into tabs-X in order to find the correct tab content
    var tabContentIdToShow = element.id.replace(/(\d)/g, '-$1');
    document.getElementById(tabContentIdToShow).style.display = 'block';
}

HTML

<ul class="side bar tabs">
    <li id="tabs1" onclick="showStuff(this)">City</li>
    <li id="tabs2" onclick="showStuff(this)">Country</li>
    <li id="tabs3" onclick="showStuff(this)">Humanity</li>  
</ul>

<div id="tabs-1" class="tabContent">
    <p>Proin elit m</p>
</div>
<div id="tabs-2" class="tabContent">
    <p>M massa ut d</p>
</div>
<div id="tabs-3" class="tabContent">
    <p> sodales.</p>
</div>

I have also updated the showElement function to be more generic so that there is less code duplication when hiding and showing the correct tab content.

The only caveat is that getElementsByClassName() is not available in IE8 or below. Other (modern) browsers have this function but there are alternatives - see getElementsByClassName & IE8: Object doesn't support this property or method .

Answer 2

You have to first set a display: none for all of your tab contents.

eg

<script type="text/javascript">
function showTab(selected, total)
{
  for(i = 1; i <= total; i += 1)
  {
    document.getElementById('tabs-' + i).style.display = 'none';
  }

  document.getElementById('tabs-' + selected).style.display = 'block';
}
</script>

<div id="tabs-1" style="display: none">tab1</div>
<div id="tabs-2" style="display: none">tab2</div>
<div id="tabs-3" style="display: none">tab3</div>

<ul class="side bar tabs">
  <li id = "tabs1" onclick = "showTab(1,3)">City</li>
  <li id = "tabs2" onclick = "showTab(2,3)">Country</li>
  <li id = "tabs3" onclick = "showTab(3,3)">Humanity</li>  
</ul>

If there is something like this with your code, I'm sure that it's going to work. BTW, Check your Console window for JavaScript errors.

Answer 3

I think that this should do it:

<ul class="side bar tabs">
    <li  id = "tabs1" onclick = "showStuff('tabs-1')">City</li>
    <li  id = "tabs2" onclick = "showStuff('tabs-2')">Country</li>
    <li  id = "tabs3" onclick = "showStuff('tabs-3')">Humanity</li>  
</ul>

  <script type="text/javascript">
  function showStuff (id) 
  {

        document.getElementById("tabs-1").style.display = "none";
        document.getElementById("tabs-2").style.display = "none";
        document.getElementById("tabs-3").style.display = "none";
        document.getElementById(id).style.display = "block";

  }
  </script>

  <div id="tabs-1" style="display:none">tabs 1 content</div>
  <div id="tabs-2" style="display:none">tabs 2 content</div>
  <div id="tabs-3" style="display:none">tabs 3 content</div>

Answer 4

<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>

<div id="tabs">
 <ul>
  <li><a href="#tabs-1">City</a></li>
  <li><a href="#tabs-2">Country</a></li>
  <li><a href="#tabs-3">Humanity</a></li>
 </ul>
 <div id="tabs-1">..............</div>
 <div id="tabs-2">..............</div>
 <div id="tabs-3">..............</div>
</div>

Answer 5

you can try this

 function showStuff(id){
$('#tabs1').empty();
  $('#tab2').show();
}

or the other way