如何隱藏其他選項卡的內容，並只顯示所選擇的選項卡的內容

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(); 
} 

或其他方式