Javascript標簽：為什么我的標簽內容沒有顯示？

Question

我正在嘗試使用最簡單的基本Javascript腳本來制作選項卡（這對我來說絕對必須使用簡單Javascript ， 不使用JQuery或其他任何東西 ，我僅限於在此項目中使用簡單Javascript）。 我已經准備好幾乎所有內容，並且已經驗證了HTML和CSS以及檢查文件中是否存在運行時錯誤。 顯示選項卡標題。

我唯一的問題是選項卡標題不可單擊，並且選項卡的內容未顯示。 我究竟做錯了什么？

這是一個小提琴： 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錨點更改為<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";

          });
      }
  }

Answer 2

1-將i-0更改為i = 0；

2-將包含更改為包含

3-將querySelector更改為querySelectorAll

4-將選擇器添加到href

我不會再想了。

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