如何隐藏其他标签的内容并仅显示所选标签的内容

Question

我的HTML是

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

而JavaScript则是

<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

为所有选项卡内容元素提供一个通用的CSS类,可以更容易地选择和设置它们,例如在下面的演示和代码中.

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>

我还将该showElement函数更新为更通用,以便在隐藏和显示正确的选项卡内容时减少代码重复.

唯一需要注意的是getElementsByClassName()IE8或以下版本不可用.其他(现代)浏览器具有此功能,但有其他选择 - 请参阅getElementsByClassName和IE8:Object不支持此属性或方法.