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

Question

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

当我点击某个特定的标签其他标签的内容应该被隐藏在但它并不隐藏。这是我拥有的所有代码。

Answer 1

给予所有标签内容元素常见的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函数更通用，以便隐藏和显示正确的选项卡内容时代码重复性更少。

唯一需要注意的是，getElementsByClassName()不适用于IE8或更低版本。 Other (modern) browsers有此功能，但有替代方法 - 请参阅getElementsByClassName & IE8: Object doesn't support this property or method。

Answer 2

您必须首先为所有标签内容设置一个display: none。

e。 G。

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

如果你的代码有这样的东西，我相信它会起作用。顺便说一句，检查你的控制台窗口的JavaScript错误。

Answer 3

我认为这应该这样做：

<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

你可以试试这个

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

或其他方式