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

Question

我正在尝试使用最简单的基本 Javascript 制作标签(这绝对强制我使用简单的 Javascript，没有 JQuery 或任何东西，我'仅限于为这个元素使用简单的 Javascript)。我几乎已经准备好一切，我已经验证了我的 HTML 和 CSS，并检查了我的文件中是否存在任何运行时错误。选项卡标题显示。

我唯一的问题是标签标题不可点击，我的标签内容也没有显示。我做错了什么？

这是一个 fiddle :https://jsfiddle.net/1qr0qmzk/

这是我的脚本:

//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";

        });
    }
}

这是我的标签结构:

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

这是我的 CSS:

.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;
    }

已编辑:修复了 (i-0) 拼写错误，更正为 (i=0)。标签内容仍未显示。

Answer 1

你的js函数有几个错误。将您的 html anchor 更改为 <a href="#tab2"> , <a href="#tab3">等等并像下面这样更改js

  //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";

          });
      }
  }