Javascript 为什么不'；t标签循环中的链接，而我只得到最后一个？

我用JavaScript ES5制作标签，而不是ES6

我已成功循环选项卡内容，但链接不会循环

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

我正在尝试将哈希值替换为零-我认为这似乎有效

当您单击任何选项卡时，只有最后一个选项卡被选中，不确定如何修复该选项卡

这是密码笔：

以下是当前的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>

标题
标题22
标题3
标题244442

下面是当前的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');
            }

        }


    });

}

window.onload=function（）{
//变数
var tabLinks=document.getElementsByClassName（'services-tab__-link-item'）；
var tabContents=document.getElementsByClassName（'services-tab__-tab-item'）；
//循环通过选项卡链接
对于（var i=0；i

}

使用

this

而不是

tabLink

（因为当您单击链接时，tabLink变量已经更改）

在替换方法中使用

'

代替

'

从除活动链接之外的所有链接中单击后，移除

处于活动状态的类

window.onload=function（）{
//变数
var tabLinks=document.getElementsByClassName（'services-tab__-link-item'）；
var tabContents=document.getElementsByClassName（'services-tab__-tab-item'）；
//循环浏览选项卡链接
对于（var i=0；i

/*全局*/
氢{
保证金：0；
}
/*选项卡菜单*/
.services-tab___容器{
宽度：50%；
保证金：0自动；
}
.services-tab___导航{
列表样式：无；
填充：0；
}
.services-tab\uuu列表项{
显示：内联块；
}
.services-tab__链接项{
文字装饰：无；
显示：块；
背景：#达达达；
填充：9px 14px；
颜色：白色；
字体大小：14px；
边界半径：6px；
字体大小：粗体；
过渡：.15秒缓进缓出；
}
.services-tab__-link-item.is-active{
背景色：#9b9b9b；
}
.services-tab__-link-item:悬停{
背景色：#A7A7；
}
/*选项卡项*/
.services-tab\uuu-tab-item{
背景色：#C1C1；
填充：20px；
边界半径：5px；
显示：无；
}
.services-tab\uu tab-item.is-visible{
显示：块；
}

表1
同侧阴唇是一种特殊的疾病。坐在阿梅特·康塞特图尔·阿迪皮塞特的座位上。这是一项非常重要的工作。你是说你的皮肤是白色的吗

表2-耶
表3-太棒了！
你是说你的皮肤是白色的吗？我的同僚们都是精英。在实验室中，我们可以看到一个不同的地方

表4-快乐编码！
你是说你的皮肤是白色的吗？如果没有必要进行必要的劳动，就没有必要进行特殊的劳动

您应该使用event.target而不是tabLink
这是密码笔

`window.onload=function（）{
//变数
var tabLinks=document.getElementsByClassName（'services-tab__-link-item'）；
var tabContents=document.getElementsByClassName（'services-tab__-tab-item'）；
//循环通过选项卡链接
对于（var i=0；iel.classList.remove（'is-active'））；
event.target.classList.add（'is-active'）；
//循环浏览选项卡内容
对于（var j=0；j`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');
                }

            }


        });

    }


}`

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