Geek asks and answers

Tabs inside tabs in HTML / CSS and javascript?

I want to create a tab in HTML. My problem is that on one tab there are tabs inside it. My problem is that I do not know how to guarantee that sub-tabs are not displayed if I am not on the profile tab. What is the best way to do this? How can I use javascript to update the class accordingly and not show tabs? Any help would be appreciated. My code

            <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>

and CSS code

.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;
}
+3
source share
2 answers

Good to forget the previous answer. A jQuery tab or similar solution is the way to go. I was really new to web development when I asked a question

0
source

... , 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 -->
0

More articles:


All Articles