为什么选项卡中的链接不循环，而我只得到最后一个？

Question

我正在用 JavaScript ES5 制作制表符，没有 ES6。

我已成功循环标签内容，但链接不会循环。

我相信是因为它已经循环到最后了。所以我需要用 [0] 或 [1] 来获取它们中的每一个，但这似乎也不起作用。

我正在尝试将散列替换为空 - 我认为这似乎有效。

当您单击任何选项卡时，只会选择最后一个选项卡，不知道如何解决这个问题。

这里是码笔：https://codepen.io/lovetocodex/pen/VyQLYE?editors=1010

这是当前的 HTML 代码：

    <section>
<!-- New Code -->
<div class="services-tab__container">

  <div class="services-tab__list-topic">
  <ul class="services-tab__nav">

    <li class="services-tab__list-item">
      <a href="#tab_1" class="services-tab__link-item">
        <span>Tab1</span>
      </a>
    </li>

    <li class="services-tab__list-item">
      <a href="#tab_2" class="services-tab__link-item">
        <span>Tab2</span>
      </a>
    </li>

    <li class="services-tab__list-item">
      <a href="#tab_3" class="services-tab__link-item">
        <span>Tab3</span>
      </a>
    </li>

    <li class="services-tab__list-item">
      <a href="#tab_4" class="services-tab__link-item">
        <span>Tab4</span>
      </a>
    </li>

  </ul>
  </div><!-- /list-topic -->

  <div class="services-tab__list-content">

    <!-- <img src="<?= get_sub_field('icon') ?>" alt="Slide Icon" class="sslider__icon"> -->

    <div id="tab_1" class="services-tab__tab-item is-visible">
      <h2>Title</h2>
    </div>

    <div id="tab_2" class="services-tab__tab-item">
      <h2>Title22</h2>
    </div>

    <div id="tab_3" class="services-tab__tab-item">
      <h2>Title3</h2>
    </div>

    <div id="tab_4" class="services-tab__tab-item">
      <h2>Title24444442</h2>
    </div>

  </div><!-- /services-tab__list-content -->

</div>
</section>

这是当前的 JS 代码：

window.onload = function() {

 // Variables   
     var tabLinks = document.getElementsByClassName('services-tab__link-item');
     var tabContents = document.getElementsByClassName('services-tab__tab-item');

// Loop through the tab link
for(var i = 0; i < tabLinks.length; i++) {
    var tabLink = tabLinks[i];
    tabLink.addEventListener('click', function(e) {
        console.log(tabLink);

        e.preventDefault();
        var id = tabLink.hash.replace('#', ' ');
        tabLink.classList.add('is-active');



        // Loop through the tab content
        for(var j = 0; j < tabContents.length; j++) {
            var tabContent = tabContents[j];
            console.log(tabContent);
            tabContentId = tabContent.getAttribute('id');
            tabContent.classList.remove('is-visible');

            if(tabContentId === id) {
                tabContent.classList.add('is-visible');
            }

        }


    });

}

}

Answer 1

使用 this 而不是 tabLink（因为当您单击 link 时， 选项卡 link 变量已更改已经);
在替换方法中使用 '' 而不是 ' '；
点击后从所有 link 中删除 is-active class，不包括活动的。

window.onload = function() {

  // Variables  
  var tabLinks = document.getElementsByClassName('services-tab__link-item');
  var tabContents = document.getElementsByClassName('services-tab__tab-item');

  // Loop through the tab links
  for (var i = 0; i < tabLinks.length; i++) {
    tabLinks[i].addEventListener('click', function(e) {
      e.preventDefault();
      var id = this.hash.replace('#', '');

      // Loop through the tab links and tab contents
      for (var i = 0; i < tabLinks.length; i++) {
        tabContents[i].classList.remove('is-visible');
        tabLinks[i].classList.remove('is-active');
        if (tabContents[i].id === id) {
          tabContents[i].classList.add('is-visible');
        }
      }
      this.classList.add('is-active');
    });
  }
}

/* GLOBAL */

h2 {
  margin: 0;
}


/* TAB MENU */

.services-tab__container {
  width: 50%;
  margin: 0 auto;
}

.services-tab__nav {
  list-style: none;
  padding: 0;
}

.services-tab__list-item {
  display: inline-block;
}

.services-tab__link-item {
  text-decoration: none;
  display: block;
  background: #dadada;
  padding: 9px 14px;
  color: white;
  font-size: 14px;
  border-radius: 6px;
  font-weight: bold;
  transition: .15s ease-in-out;
}

.services-tab__link-item.is-active {
  background-color: #9b9b9b;
}

.services-tab__link-item:hover {
  background-color: #a7a7a7;
}


/* TAB ITEMS */

.services-tab__tab-item {
  background-color: #c1c1c1;
  padding: 20px;
  border-radius: 5px;
  display: none;
}

.services-tab__tab-item.is-visible {
  display: block;
}

<section>
  <!-- New Code -->
  <div class="services-tab__container">

    <div class="services-tab__list-topic">
      <ul class="services-tab__nav">

        <li class="services-tab__list-item">
          <a href="#tab_1" class="services-tab__link-item is-active">
            <span>Tab1</span>

          </a>
        </li>

        <li class="services-tab__list-item">
          <a href="#tab_2" class="services-tab__link-item">
            <span>Tab2</span>
          </a>
        </li>

        <li class="services-tab__list-item">
          <a href="#tab_3" class="services-tab__link-item">
            <span>Tab3</span>
          </a>
        </li>

        <li class="services-tab__list-item">
          <a href="#tab_4" class="services-tab__link-item">
            <span>Tab4</span>
          </a>
        </li>

      </ul>
    </div>
    <!-- /list-topic -->

    <div class="services-tab__list-content">

      <!-- <img src="<?= get_sub_field('icon') ?>" alt="Slide Icon" class="sslider__icon"> -->

      <div id="tab_1" class="services-tab__tab-item is-visible">
        <h2>Tab 1</h2>
        <p>Lorem ipsum dolor a, quod debitis aspernatur neque sit distinctio. Sit amet consectetur adipisicing elit. Itaque nemo atque incidunt laborum delectus. Cum adipisci perspiciatis blanditiis magni velit nihil id vero? </p>
      </div>

      <div id="tab_2" class="services-tab__tab-item">
        <h2>Tab 2 - YAY</h2>
      </div>

      <div id="tab_3" class="services-tab__tab-item">
        <h2>Tab 3 - Awesome!</h2>
        <p>Cum adipisci perspiciatis blanditiis magni velit nihil id vero? Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque nemo atque incidunt laborum delectus a, quod debitis aspernatur neque sit distinctio.</p>
      </div>

      <div id="tab_4" class="services-tab__tab-item">
        <h2>Tab 4 - Happy Coding!</h2>
        <p>Cum adipisci perspiciatis blanditiis magni velit nihil id vero? Itaque nemo atque incidunt laborum delectus a, quod debitis aspernatur neque sit distinctio.</p>
      </div>

    </div>
    <!-- /services-tab__list-content -->

  </div>
</section>

Answer 2

您应该使用 event.target 而不是 tabLink
这里是码笔it's work

`window.onload = function() {

  // Variables  
    var tabLinks = document.getElementsByClassName('services-tab__link-item');
  var tabContents = document.getElementsByClassName('services-tab__tab-item');

    // Loop through the tab link
    for(var i = 0; i < tabLinks.length; i++) {
        var tabLink = tabLinks[i];
        tabLink.addEventListener('click', function(e) {

            e.preventDefault();
            var id = event.target.nodeName =='A' ? event.target.hash.replace('#', '') : 'tab_1';
            Array.from(document.querySelectorAll('.is-active')).forEach( el => el.classList.remove('is-active'));
            event.target.classList.add('is-active');

            // Loop through the tab content
            for(var j = 0; j < tabContents.length; j++) {
                var tabContent = tabContents[j];
                tabContentId = tabContent.getAttribute('id');
                tabContent.classList.remove('is-visible');

                if(tabContentId === id) {
                    tabContent.classList.add('is-visible');
                }

            }


        });

    }


}`

从 html 中删除范围：

<section>
<!-- New Code -->
<div class="services-tab__container">

  <div class="services-tab__list-topic">
  <ul class="services-tab__nav">

    <li class="services-tab__list-item">
      <a href="#tab_1" class="services-tab__link-item is-active">
        Tab1

      </a>
    </li>

    <li class="services-tab__list-item">
      <a href="#tab_2" class="services-tab__link-item">
        Tab2
      </a>
    </li>

    <li class="services-tab__list-item">
      <a href="#tab_3" class="services-tab__link-item">
        Tab3
      </a>
    </li>

    <li class="services-tab__list-item">
      <a href="#tab_4" class="services-tab__link-item">
        Tab4
      </a>
    </li>

  </ul>
  </div><!-- /list-topic -->

  <div class="services-tab__list-content">

    <!-- <img src="<?= get_sub_field('icon') ?>" alt="Slide Icon" class="sslider__icon"> -->

    <div id="tab_1" class="services-tab__tab-item is-visible">
      <h2>Tab 1</h2>
            <p>Lorem ipsum dolor a, quod  debitis aspernatur neque sit distinctio. Sit amet consectetur adipisicing elit. Itaque nemo atque incidunt laborum delectus. Cum adipisci perspiciatis blanditiis magni velit nihil id vero? </p>
    </div>

    <div id="tab_2" class="services-tab__tab-item">
      <h2>Tab 2 - YAY</h2>
    </div>

    <div id="tab_3" class="services-tab__tab-item">
      <h2>Tab 3 - Awesome!</h2>
            <p>Cum adipisci perspiciatis blanditiis magni velit nihil   id vero?  Lorem ipsum dolor sit amet consectetur adipisicing   elit. Itaque nemo atque incidunt laborum delectus a, quod  debitis aspernatur neque sit distinctio.</p>
    </div>

    <div id="tab_4" class="services-tab__tab-item">
      <h2>Tab 4 - Happy Coding!</h2>
            <p>Cum adipisci perspiciatis blanditiis magni velit nihil   id vero? Itaque nemo atque incidunt laborum delectus a, quod  debitis aspernatur neque sit distinctio.</p>
    </div>

  </div><!-- /services-tab__list-content -->

</div>
</section>

为什么选项卡中的链接不循环，而我只得到最后一个？

Why don't the links in the tab loop, and I get only the last one?

javascript

tabs

ecmascript-5