HTML：選項卡的內容不會消失

Question

我有一個帶有選項卡的代碼，但該選項卡的內容拒絕保持隱藏狀態，直到單擊相應的選項卡。我也有一個標籤，不管我嘗試過什麼，它的內容仍然可見。當我使用它時，css代碼div.tabContent.hide { display: none; }不適用於tab4。如果有任何不兼容的問題，我正在谷歌瀏覽器中運行。

HTML-

<nav> 
    <ul id="tabs"> 
     <li> <a href="#home" style="font-weight: bold;">tab1</a> 

     </li> 
     <li> <a href="#products" style="font-weight: bold;">tab2</a> 

     </li> 
     <li> <a href="#order" style="font-weight: bold;">tab3</a> 

     </li> 
    </ul> 
</nav> 
<hr class="style"></hr> 
<div class="tabContent" id="home"> 
    <div class="box"> 
      <h2>tab1 content</h2> 

     <div> 
      <p></p> 
      <p></p> 
     </div> 
    </div> 
</div> 
<div class="tabContent" id="products"> 
    <div class="box"> 
      <h2>tab2 content</h2> 

     <div> 
      <p></p> 
      <p></p> 
     </div> 
    </div> 
</div> 
<div class="tabContent" id="order"> 
    <div class="box"> 
      <h2>tab3 content</h2> 

     <div> 
      <p></p> 
      <ul id="tabs2"> <a href="#order" style="font-weight: bold;">tab4</a> 

      </ul> 
      <div class="tabContent2"> 
       <div class="box"> 
         <h2>tab4 content</h2> 

        <div> 
         <p></p> 
         <p></p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

JS-

var tabLinks = new Array(); 
var contentDivs = new Array(); 

function init() { 

    var tabListItems = document.getElementById('tabs').childNodes; 
    for (var i = 0; i < tabListItems.length; i++) { 
     if (tabListItems[i].nodeName == "LI") { 
      var tabLink = getFirstChildWithTagName(tabListItems[i], 'A'); 
      var id = getHash(tabLink.getAttribute('href')); 
      tabLinks[id] = tabLink; 
      contentDivs[id] = document.getElementById(id); 
     } 
    } 

    var i = 0; 

    for (var id in tabLinks) { 
     tabLinks[id].onclick = showTab; 
     tabLinks[id].onfocus = function() { 
      this.blur() 
     }; 
     if (i == 0) tabLinks[id].className = 'selected'; 
     i++; 
    } 

    var i = 0; 

    for (var id in contentDivs) { 
     if (i != 0) contentDivs[id].className = 'tabContent hide'; 
     i++; 
    } 
} 

function showTab() { 
    var selectedId = getHash(this.getAttribute('href')); 

    for (var id in contentDivs) { 
     if (id == selectedId) { 
      tabLinks[id].className = 'selected'; 
      contentDivs[id].className = 'tabContent'; 
     } else { 
      tabLinks[id].className = ''; 
      contentDivs[id].className = 'tabContent hide'; 
     } 
    } 

    return false; 
} 

function getFirstChildWithTagName(element, tagName) { 
    for (var i = 0; i < element.childNodes.length; i++) { 
     if (element.childNodes[i].nodeName == tagName) return element.childNodes[i]; 
    } 
} 

function getHash(url) { 
    var hashPos = url.lastIndexOf('#'); 
    return url.substring(hashPos + 1); 
} 

CSS-

nav { 
    background: rgba(0, 0, 0, 0); 
    height: 80px; 
    border-radius: 0px; 
} 
nav ul { 
    width: 50%; 
    margin: auto; 
} 
nav ul li { 
    list-style-type: none; 
    width: 150px; 
    margin-top: 15px; 
    float: left; 
    border: none; 
    text-align: center; 
} 
li a { 
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; 
    text-decoration: none; 
    color: #333333; 
    border-radius: 0px; 
    text-shadow: 0 1px 1px rgba(0, 0, 0, .5); 
    line-height: 50px; 
    display: block; 
    transition: all ease-in-out 250ms; 
} 
li a:hover { 
    background: rgba(255, 255, 255, .2); 
    box-shadow: 0 8px 8px -6px #333; 
    color: #222222; 
    padding: 0px 0px; 
    text-shadow: 0 2px 4px rgba(0, 0, 0, .5); 
} 
.theme { 
    background: rgba(0, 0, 0, 0); 
    float: left; 
    width: 80px; 
    text-align: center; 
    margin-left: 15px; 
    padding: 10px 15px; 
    color: #111; 
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5); 
    border: none; 
    transition: all ease-in-out 250ms; 
} 
.theme:hover { 
    cursor: pointer; 
    background: rgba(255, 255, 255, .3); 
    color: #000; 
    text-shadow: 0 2px 2px rgba(0, 0, 0, .6); 
    box-shadow: 0 8px 10px -6px #333; 
    transition: all ease-in-out 150ms; 
    border: none; 
} 
.theme:active { 
    background: rgba(255, 255, 255, .3); 
    padding: 10px 15px; 
    box-shadow: 0 0 0 #333; 
    color: #000; 
    text-shadow: 0 0 0 rgba(0, 0, 0, .6); 
    border: none; 
} 
.box { 
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; 
    padding: 100px 200px; 
    background: rgba(255, 255, 255, .3); 
    box-shadow: 0 10px 15px -6px #333; 
} 
div.tabContent.hide { 
    display: none; 
} 

hr.style { 
    border: 0; 
    height: 0; 
    border-top: 1px solid rgba(0, 0, 0, 0.1); 
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); 
} 
#ordertabs:hover { 
    background: #AB1F1F; 
} 

的jsfiddle：http://jsfiddle.net/ko7tbf7h/5/

Answer 1

您的CSS代碼不正確。這就是爲什麼它不起作用！

div.tabContent.hide { 
    display: none; 
} 

應該是─

div.tabContent { 
    display: none; 
} 

更新的jsfiddle：http://jsfiddle.net/emfx45m2/