3

我想在 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;
}
4

2 回答 2

0

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

您的意见将不胜感激。

JS

<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 -->
于 2012-05-20T10:52:17.473 回答
0

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

于 2013-01-10T23:32:05.213 回答