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

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

1. 使用 this 而不是 tabLink(因为当您单击链接时，tablink 变量已经更改)；
2. 在替换方法中使用 '' 代替 ' '；
3. 在点击后从除事件链接之外的所有链接中删除 is-active 类。

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>