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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – 如何隐藏其他标签的内容并仅显示所选标签的内容，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1940字，纯文字阅读大概需要3分钟。

内容图文

我的HTML是

<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>

而JavaScript则是

<script type="text/javascript">
function showStuff (id) 
{
    if (document.getElementById(id).style.display === "block")
    {
        document.getElementById(id).style.display = "none";
    }
    else
    {
        document.getElementById(id).style.display = "block";
    }       
}
</script>

当我单击特定选项卡时,其他选项卡的内容应该被隐藏但不隐藏.这是我的所有代码.

解决方法:

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

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函数更新为更通用,以便在隐藏和显示正确的选项卡内容时减少代码重复.

唯一需要注意的是,IE001或IE8不提供getElementsByClassName(). Other (modern) browsers有此功能,但有其他选择 – 见getElementsByClassName & IE8: Object doesn’t support this property or method.

内容总结

以上是互联网集市为您收集整理的javascript – 如何隐藏其他标签的内容并仅显示所选标签的内容全部内容，希望文章能够帮你解决javascript – 如何隐藏其他标签的内容并仅显示所选标签的内容所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端