Javascript Tabs: Why Isn't My Tab Contents Showing Up?

Question

I'm doing trying to make tabs using the most simplest basic Javascripting possible (this is absolutely mandatory for me to use simple Javascript , no JQuery or anything , I'm limited to just using simple Javascript for this project). I've got almost everything in place and I've already validated my HTML and CSS as well as check for any runtime errors on my file. The tab headings show up.

My only problem is that tab headings aren't clickable and the contents of my tabs aren't showing up. What am I doing wrong?

Here's a fiddle: https://jsfiddle.net/1qr0qmzk/

Here's my Script:

//Tab initialization

window.addEventListener("load", function() {
    makeTabs(".tabs")
});

function makeTabs(selector) {

    tab_lists_anchors = document.querySelectorAll(selector + "li a");
    divs = document.querySelector(selector).getElementsByTagName("div");

    for (var i=0; i < tab_lists_anchors.length; i++){
        if (tab_lists_anchors[i].classList.contain('active')) {
            divs[i].style.display = "block";
        }
    }

    for (i=0; i < tab_lists_anchors.length; i++){

        document.querySelector(".tabs li a")[i].addEventListener('click', function(e){

        for (i=0; i < divs.length; i++){
            divs[i].style.display = "none";
        }

        for (i=0; i < tab_lists_anchors.length; i++){
            tab_lists_anchors[i].classList.remove("active");
        }

            clicked_tab = e.targed || e.srcElement;

            clicked_tab.classList.add('active');
            div_to_show = clicked_tab.getAttribute('href');

            document.querySelector(div_to_show).style.display = "block";

        });
    }
}

Here's my tab structure:

 <div class="tabs">
    <ul> <!-- Tab Headings -->
        <li><a href="#" class="active">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
        <li><a href="#">Tab4</a></li>
    </ul>

    <!-- Tab Contents -->
    <div id="tab1">
        <h1>Tab 1</h1>
        <p>Lorem Ipsum. Contents of tab 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices ante vel elementum tristique. In suscipit nisi et purus cursus, eget tincidunt nunc mattis. Duis commodo mollis interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In efficitur massa et ex gravida imperdiet. Phasellus finibus arcu ut erat dignissim efficitur. Curabitur quam ipsum, volutpat et elit et, sollicitudin malesuada mi. Praesent eget dui dui.</p>
    </div>

    <div id="tab2">
        <h1>Tab 2</h1>
        <p>Contents of tab 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices ante vel elementum tristique. In suscipit nisi et purus cursus, eget tincidunt nunc mattis. Duis commodo mollis interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In efficitur massa et ex gravida imperdiet. Phasellus finibus arcu ut erat dignissim efficitur. Curabitur quam ipsum, volutpat et elit et, sollicitudin malesuada mi. Praesent eget dui dui.</p>
    </div>

    <div id="tab3">
        <h1>Tab 3</h1>
        <p>Contents of tab . Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices ante vel elementum tristique. In suscipit nisi et purus cursus, eget tincidunt nunc mattis. Duis commodo mollis interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In efficitur massa et ex gravida imperdiet. Phasellus finibus arcu ut erat dignissim efficitur. Curabitur quam ipsum, volutpat et elit et, sollicitudin malesuada mi. Praesent eget dui dui.</p>
    </div>

    <div id="tab4">
        <h1>Tab 4</h1>
        <p>Contents of tab 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices ante vel elementum tristique. In suscipit nisi et purus cursus, eget tincidunt nunc mattis. Duis commodo mollis interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In efficitur massa et ex gravida imperdiet. Phasellus finibus arcu ut erat dignissim efficitur. Curabitur quam ipsum, volutpat et elit et, sollicitudin malesuada mi. Praesent eget dui dui.</p>
    </div>
</div>

Here's my CSS for it:

.tabs{
        overflow: hidden;
        clear: both;
    }

    .tabs ul{
        list-style-type: none;
        margin: 0 0 0 0;
        bottom: -1px;
        position: relative;
    }

    .tabs li{
        float: left;
        margin: 0 0;
    }

    .tabs a{
        display: block;
        padding: 5px 10px;
        background-color: #EEE;
        color: #000;
        text-decoration: none;
        margin: 0;
        border-top: 1px solid #CCC;
        border-bottom: 1px solid #CCC;
        border-right: 1px solid #DDD;
        border-left: 1px solid #DDD;
        font: 13px/18px verdana, arial, sans-serif;         
    }

    .tabs a.active{
        background-color: #fff;
        border-bottom: 1px solid #fff;
    }

    .tabs div{
        clear: both;
        border: 1px solid #CCC;
        padding: 10px;
        font-family: verdana;
        font-size: 13px;
        background-color: purple;
        display: none;
    }

EDITED: fixed a (i-0) typo, corrected into (i=0). Tab contents still not showing up.

Answer 1

There are several errors in your js function. Change your html anchors to <a href="#tab2"> , <a href="#tab3"> etc and change the js like below

  //Tab initialization
  window.addEventListener("load", function() {
      makeTabs(".tabs")
  });

  function makeTabs(selector) {

      tab_lists_anchors = document.getElementsByTagName("a");
      divs = document.querySelector(selector).getElementsByTagName("div");

      for (var i = 0; i < tab_lists_anchors.length; i++) {
          if (tab_lists_anchors[i].classList.contains('active')) {
              divs[i].style.display = "block";
          }
      }

      for (i = 0; i < tab_lists_anchors.length; i++) {

          document.getElementsByTagName("a")[i].addEventListener('click', function(e) {

              for (i = 0; i < divs.length; i++) {
                  divs[i].style.display = "none";
              }

              for (i = 0; i < tab_lists_anchors.length; i++) {
                  tab_lists_anchors[i].classList.remove("active");
              }

              clicked_tab = e.target || e.srcElement;

              clicked_tab.classList.add('active');
              div_to_show = clicked_tab.getAttribute('href');

              document.querySelector(div_to_show).style.display = "block";

          });
      }
  }

Answer 2

1 - change i-0 to i=0;

2 - change contain to contains

3 - change querySelector to querySelectorAll

4 - add selector to href

I dont remenber more..

View on Jsfiddle

 //Tab initialization window.onload = function(){ makeTabs(".tabs"); }; function makeTabs(selector) { tab_lists_anchors = document.querySelectorAll(selector + " li a"); divs = document.querySelector(selector).querySelectorAll("div"); for (var i=0; i < tab_lists_anchors.length; i++){ if (tab_lists_anchors[i].classList.contains('active')) { divs[i].style.display = "block"; } } for (i=0; i < tab_lists_anchors.length; i++){ document.querySelectorAll(".tabs li a")[i].addEventListener('click', function(e){ for (i=0; i < divs.length; i++){ divs[i].style.display = "none"; } for (i=0; i < tab_lists_anchors.length; i++){ tab_lists_anchors[i].classList.remove("active"); } clicked_tab = e.target || e.srcElement; clicked_tab.classList.add('active'); div_to_show = clicked_tab.getAttribute('href'); document.querySelector(div_to_show).style.display = "block"; }); } } 

 .tabs{ overflow: hidden; clear: both; } .tabs ul{ list-style-type: none; margin: 0 0 0 0; bottom: -1px; position: relative; } .tabs li{ float: left; margin: 0 0; } .tabs a{ display: block; padding: 5px 10px; background-color: #EEE; color: #000; text-decoration: none; margin: 0; border-top: 1px solid #CCC; border-bottom: 1px solid #CCC; border-right: 1px solid #DDD; border-left: 1px solid #DDD; font: 13px/18px verdana, arial, sans-serif; } .tabs a.active{ background-color: #fff; border-bottom: 1px solid #fff; } .tabs div{ clear: both; border: 1px solid #CCC; padding: 10px; font-family: verdana; font-size: 13px; background-color: purple; display: none; } 

 <div class="tabs"> <ul> <!-- Tab Headings --> <li><a href="#tab1" class="active">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> <li><a href="#tab4">Tab4</a></li> </ul> <!-- Tab Contents --> <div id="tab1"> <h1>Tab 1</h1> <p>Lorem Ipsum. Contents of tab 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices ante vel elementum tristique. In suscipit nisi et purus cursus, eget tincidunt nunc mattis. Duis commodo mollis interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In efficitur massa et ex gravida imperdiet. Phasellus finibus arcu ut erat dignissim efficitur. Curabitur quam ipsum, volutpat et elit et, sollicitudin malesuada mi. Praesent eget dui dui.</p> </div> <div id="tab2"> <h1>Tab 2</h1> <p>Contents of tab 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices ante vel elementum tristique. In suscipit nisi et purus cursus, eget tincidunt nunc mattis. Duis commodo mollis interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In efficitur massa et ex gravida imperdiet. Phasellus finibus arcu ut erat dignissim efficitur. Curabitur quam ipsum, volutpat et elit et, sollicitudin malesuada mi. Praesent eget dui dui.</p> </div> <div id="tab3"> <h1>Tab 3</h1> <p>Contents of tab . Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices ante vel elementum tristique. In suscipit nisi et purus cursus, eget tincidunt nunc mattis. Duis commodo mollis interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In efficitur massa et ex gravida imperdiet. Phasellus finibus arcu ut erat dignissim efficitur. Curabitur quam ipsum, volutpat et elit et, sollicitudin malesuada mi. Praesent eget dui dui.</p> </div> <div id="tab4"> <h1>Tab 4</h1> <p>Contents of tab 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices ante vel elementum tristique. In suscipit nisi et purus cursus, eget tincidunt nunc mattis. Duis commodo mollis interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In efficitur massa et ex gravida imperdiet. Phasellus finibus arcu ut erat dignissim efficitur. Curabitur quam ipsum, volutpat et elit et, sollicitudin malesuada mi. Praesent eget dui dui.</p> </div> </div>