HTML: Content of a tab does not disappear

308
November 23, 2016, at 3:09 PM

I have a code with tabs, but the content of the tab refuses to remain hidden until the appropriate tab is clicked. I also have a tab inside another that no matter what I have tried, it's content remains visible. The css code div.tabContent.hide { display: none; } does not work with tab4 when I use it. I am running this in google chrome, if anything is not compatible.

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

Your CSS code is incorrect. That's why it doesn't work!

div.tabContent.hide {
    display: none;
}

should be-

div.tabContent {
    display: none;
}

Updated JSFiddle: http://jsfiddle.net/emfx45m2/

READ ALSO
(After a click event) how to open a list of links in new tabs with a delay after each opening

(After a click event) how to open a list of links in new tabs with a delay after each opening

I'm trying to make a script (for Greasemonkey) that (while visiting a specific page),[nnn]if you click the link that I insert into the page[nnn](the link "does nothing", i. e.

339
Can I improve the rendering of thousands of elements using JavaScript jQuery?

Can I improve the rendering of thousands of elements using JavaScript jQuery?

I am developing an application based on the Google Maps APIs: basically I have the postal codes of my country and I need to show them. .

321
CanvasJS synchronize Panning with Image

CanvasJS synchronize Panning with Image

I am rendering an Graph with CanvasJS. [nnn]It´s generated dynamically.

398
javascript function on later created element

javascript function on later created element

I have the following html setup and cannot solve this issue. .

285