JavaScript Tabs Menu (loop for)

by José Luis Rojo

HTML

<ul class="tabMenu">
            <li class="tabLi tabDefault active"><span class="dashboard"
                    onclick="openTab(event, 'dashboard')">Inicio</span>
            </li>
            <li class="tabLi"><span class="options" onclick="openTab(event, 'options')">Opciones</span></li>
            <li class="tabLi"><span class="contact" onclick="openTab(event, 'contact')">Contacto</span></li>
        </ul>

        <div class="tabs">
            <div id="dashboard" class="tabContent">
                <h3>Inicio</h3>
                <p>Arcu, voluptatem mollis veritatis doloribus, massa inventore wisi minus, dictum ut dignissimos,
                    necessitatibus. Ab consequuntur laboriosam eligendi! Etiam, perferendis mattis! Eos diam. Hic?
                    Facilisis excepturi netus accusantium auctor volutpat eaque, accusantium saepe cursus porro totam
                    nec! Hendrerit adipisci cum quisquam. Mus vero officia sed egestas molestias! Curae necessitatibus?
                    Taciti molestias.</p>
                <p>Nec? Exercitation! Sequi, proident! Curabitur omnis nibh sociosqu? Quidem dapibus elementum bibendum
                    fusce dignissimos ridiculus wisi laboriosam bibendum, reiciendis rem lobortis etiam! Nunc magnam,
                    venenatis esse cupidatat odit! Provident quo, hendrerit nonummy, porta, nostrud molestie
                    pellentesque quis congue provident faucibus dolorem mollit urna pariatur tempor aperiam sapiente
                    ullamco, et imperdiet.</p>
            </div>
            <div id="options" class="tabContent">
                <h3>Opciones</h3>
                <p>Anim dignissim laboriosam semper metus? Euismod molestie elit dis? Augue vehicula penatibus dui
                    possimus itaque aut mattis eveniet morbi risus mus, dignissimos eget scelerisque risus, accusantium
                    aute impedit, do dui, nullam consectetur massa nostra, fringilla, dis, reiciendis facilis...

CSS

.tabMenu {
    width: 100%;
    background: hsl(0, 0%, 93%);
    height: auto;
    margin: 0;
    overflow: auto;
    padding: 0;
    list-style-type: none;
}
.tabMenu li {
    cursor: pointer;
    float: left;
    background: hsl(0, 0%, 93%);
    padding: 10px 0;
    margin: 0;
   }
.tabMenu span {
    padding: 12px 20px;
}
.tabMenu span.active {
    background: hsl(0, 0%, 31%);
    padding: 12px;
    color: #fff;
}

.tabMenu li:hover {
    background: hsl(0, 0%, 31%);
    color: #fff;
}
.tabContent {
    display: none;
}
.tabs {
    margin: 15px 0 0;
}

JavaScript

function openTab(evt, tab) {
    
    sessionStorage.setItem('tabPrivacidad', '.'+tab); 
  
    // find selectors and hide not selected
    tabContent = document.querySelectorAll(".tabContent");     
    for ( i=0; i<tabContent.length; i++) {
        tabContent[i].style.display = "none";
        tabContent[i].id === tab ? tabContent[i].style.display = "block" : tabContent[i].style.display = "none";
    }

    // remove active class from li
    tabLi = document.querySelectorAll('.tabMenu li span');
    for ( i=0; i<tabLi.length; i++) {
        if (tabLi[i] != tab) {
            tabLi[i].setAttribute('class', ''); }
    }
    // active tab
    evt.currentTarget.setAttribute('class', tab + ' active');
 
}

// selected tab opened
activeTab = sessionStorage.getItem("tabPrivacidad");
(activeTab) ? document.querySelector(".tabMenu "+activeTab).click() : document.querySelector(".tabMenu .dashboard").click();