HTML/CSS 和 javascript 中的选项卡中的选项卡？答案

【问题标题】：tabs within tabs in HTML/CSS and javascript?HTML/CSS 和 javascript 中的选项卡中的选项卡？
【发布时间】：2012-05-19 13:25:12
【问题描述】：

我想在 HTML 中创建一个选项卡式视图。我的问题是其中一个选项卡中有选项卡。我的问题是我不知道如何确保子选项卡不显示，除非我在配置文件选项卡中。实现这一目标的最佳方法是什么？如何使用 javascript 相应地更新类而不显示选项卡？任何帮助将不胜感激。我的代码是

            <div class="tabheader">
            <ul>
                <li><a href="#addprop_tab" title="">Add Property</a></li>
                <li><a href="#savedprop_tab" title="">Saved Property</a></li>
                <li><a href="#inbox_tab" title="">Inbox</a></li>
                <li><a href="#profile_tab" title="">Update Profile</a></li>
            </ul>
        </div> <!-- End of tabheader -->
        <div class="tabcontent">
            <div id="addprop_tab">
                <p><a href="#" title="Click to add property">Add your property to NPLH</a></p>
                show added property
            </div> <!-- End of addprop_tab -->
            <div id="savedprop_tab">
                <p>Browse your saved properties</p>
            </div> <!-- End of savedprop_tab -->
            <div id="inbox_tab">
                <p>inbox</p>
            </div> <!-- End of inbox_tab -->
            <div id="profile_tab">
                <ul>
                    <a href="#tab1" title="">Tab1</a>
                    <a href="#tab2" title="">Tab2</a>
                    <a href="#tab3" title="">Tab3</a>
                </ul>
            </div> <!-- End of profile_tab -->
        </div> <!-- End of tabcontent -->
        <div class="subtab_content">
            <div id="tab1">
                <p>tab1</p>
            </div> <!-- End of tab1 -->     
            <div id="tab2">
                <p>tab2</p>
            </div> <!-- End of tab2 --> 
            <div id="tab3">
                <p>tab3</p>
            </div> <!-- End of tab3 --> 
        </div>

CSS代码是

.tabheader {
    width: 1000px;
    position: relative;
    top: -100px;
}

.tabheader ul { 
    list-style-type: none;
}

.tabheader ul li {
    float: left;
    width: 175px;
    font-size: 15px;
    text-align: center;
    padding: 10px 25px 10px 25px;
    margin: 0px 11px 5px 11px;
    border: 1px solid #aaa;
}

.tabcontent {
    clear: both;
    position: relative;
    top: -100px;
    height: 40px;
    overflow: hidden;
    background: #eee;
}

.tabcontent div {
    height: 40px;
    padding: 10px;
}

.subtab_content {
    clear: both;
    position: relative;
    top: -100px;
    height: 200px;
    overflow: hidden;
    background: #eee;
}



.subtab_content div {
    height: 200px;
    padding: 10px;
}

【问题讨论】：

你在用jquery吗？您如何控制标签的显示和隐藏？
它在 CSS 中由 overflow: hidden 行处理。然而，问题是如果你点击 profile_tab - tab1 然后点击其他链接 tab1 仍然显示。我认为解决方案是创建一个 javascript 以在单击链接时更新子选项卡的样式，但我不知道该怎么做
您已经找到了自己的答案。开始玩 jQuery，它真的很容易学习，在这种情况下非常有用。
我一直在环顾四周......我将不得不遍历 subtab_content div 的子项并根据需要将显示更改为阻止。但是我如何确保对于没有子标签的链接，高度等是合适的？我应该在子选项卡中保留一个空的 div 吗？我不了解 jquery 或 javascript。有人可以帮我写代码吗？谢谢
+1 用于没有 javascript/jQuery 的标签 :)

标签： javascript html css tabs nested

【解决方案1】：

我在这里回答我自己的问题......这是几个小时的工作，但我真的不知道 javascript 中的任何其他变量。这是最好的方法吗？

您的 cmets 将不胜感激。

<script type="text/javascript">
    function activateTab(mainid, li_id, divid, tabid) {
        var mainDiv = document.getElementById(mainid);
        var li = document.getElementById(li_id);
        var tabDiv = document.getElementById(divid);
        var mainTab = document.getElementById(tabid);

        for (var i = 0; i < mainDiv.childNodes.length; i++) {
            var node = mainDiv.childNodes[i];
            if (node.nodeType == 1) {
                node.style.background = (node == li) ? '#aaa' : 'white';
            }
        }
        for (var i = 0; i < tabDiv.childNodes.length; i++) {
            var node = tabDiv.childNodes[i];
            if (node.nodeType == 1) {
                node.style.display = (node == mainTab) ? 'block' : 'none';
            }
        }
    }

HTML

    <div id="tabheader">
        <ul id="tablist">
            <li id="addprop" style="background: #aaa"><a href="javascript:activateTab('tablist','addprop','tabcontent','addprop_tab')" title="">Add Property</a></li>
            <li id="savedprop"><a href="javascript:activateTab('tablist','savedprop','tabcontent','savedprop_tab')" title="">Saved Property</a></li>
            <li id="inbox"><a href="javascript:activateTab('tablist','inbox','tabcontent','inbox_tab')" title="">Inbox</a></li>
            <li id="profile"><a href="javascript:activateTab('tablist','profile','tabcontent','profile_tab')" title="">Update Profile</a></li>
        </ul>
    </div> <!-- End of tabheader -->
    <div id="tabcontent" class="maintab">
        <div id="addprop_tab" style="display: block">
            <p><a href="#" title="Click to add property">Add your property to NPLH</a></p>
        </div> <!-- End of addprop_tab -->
        <div id="savedprop_tab" style="display: none">
            <p>Browse your saved properties</p>
        </div> <!-- End of savedprop_tab -->
        <div id="inbox_tab" style="display: none">
            <p>inbox</p>
        </div> <!-- End of inbox_tab -->
        <div id="profile_tab" style="display: none">
            <p>
                <ul>
                    <a href="javascript:activateTab('tablist','profile','profile_subtab','tab1')" title="">Tab1</a>
                    <a href="javascript:activateTab('tablist','profile','profile_subtab','tab2')" title="">Tab2</a>
                    <a href="javascript:activateTab('tablist','profile','profile_subtab','tab3')" title="">Tab3</a>
                </ul>
            </p>
            <div id="profile_subtab" class="subtab">
                <div id="tab1" style="display: block">
                    <p>tab1</p>
                </div> <!-- End of tab1 -->
                <div id="tab2" style="display: none">
                    <p>tab2</p>
                </div> <!-- End of tab2 -->
                <div id="tab3" style="display: none">
                    <p>tab3</p>
                </div> <!-- End of tab3 -->
            </div>
        </div> <!-- End of profile_tab -->
    </div> <!-- End of tabcontent -->

【讨论】：

【解决方案2】：

好的，忘记上一个答案。 jQuery 选项卡或类似的解决方案是要走的路。当我问这个问题时，我对 Web 开发真的很陌生

【讨论】：