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/

HTML：选项卡的内容不会消失

1 个答案: