选项卡不能正常工作

Question

选项卡不能正常工作

4

我正在创建一个简单的应用程序，其中有两个选项卡 - Bio 和 Timeline，每个选项卡都有自己的内容。我想根据我的点击来显示/隐藏内容。我的HTML、CSS和JS文件如下所示 - (https://jsfiddle.net/m25owpse/)

$(document).ready(function() {
  $('.tablink').on('click', function(e) {
    var currentAttrValue = $(this).attr('href');

    // Show/Hide Tabs
    $('.dashfolio-about' + currentAttrValue).show().siblings().hide();

    // Change/remove current tab to active
    $(this).addClass('active').siblings().removeClass('active');

    e.preventDefault();
  });
});

.about-header-container {
  margin-left: 80px;
  margin-top: 10px;
  font-size: 15px;
}
.about-header-container>a {
  padding-right: 10px;
}
#bio-dashfolio {
  margin-top: 20px;
}
.tablink:active {
  color: red;
}
.tabcontent {
  display: none;
}
.tabcontent.active {
  display: block;
}

<div class="dashbolio-about">

  <div class="about-header-container">
    <a class="bio-header tablink" href="#bio-dashfolio"> Bio </a> 
    <a class="timeline-header tablink" href="#timeline-dashfolio"> Timeline </a> 
  </div>
  <div>
   <div class="tabcontent" id="bio-dashfolio">

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae diam non dolor sodales suscipit in in metus. Proin laoreet eros nibh, ut hendrerit diam pharetra at. Morbi id nisi efficitur, vehicula turpis non, tristique sapien. Sed sed
        vestibulum massa. Vestibulum fringilla tortor id facilisis tempus. Cras consectetur sapien nibhLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae diam non dolor sodales suscipit in in metus. Proin laoreet eros nibh, ut hendrerit
        diam pharetra at. Morbi id nisi efficitur, vehicula turpis non, tristique sapien. Sed sed vestibulum massa. Vestibulum fringilla tortor id facilisis tempus. Cras consectetur sapien nibhLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
        vitae diam non dolor sodales suscipit in in metus. Proin laoreet eros nibh, ut hendrerit diam pharetra at. Morbi id nisi efficitur, vehicula turpis non, tristique sapien. Sed sed vestibulum massa. Vestibulum fringilla tortor id facilisis tempus.
        Cras consectetur sapien nibhLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae diam non dolor</p>

    </div>
    <div class="tabcontent" id="timeline-dashfolio">
      <p>Random text is awesome don't you think?!</p>
    </div>
  </div>
</div>

但是这并没有起到作用。我认为我走的方向是正确的，请帮助我理解我哪里错了。提前感谢！

- keshinpoint

你在JavaScript中哪里添加活动类？我觉得好像缺少了... - Danmoreng

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gaetanoM · Accepted Answer

您的问题在这行代码中：

$('.dashfolio-about' + currentAttrValue).show().siblings().hide();

change to:

$(currentAttrValue).show().siblings().hide();

代码片段:

$(document).ready(function() {
  $('.tablink').on('click', function(e)  {
    var currentAttrValue = $(this).attr('href');

    // Show/Hide Tabs
    $(currentAttrValue).show().siblings().hide();

    // Change/remove current tab to active
    $(this).addClass('active').siblings().removeClass('active');

    e.preventDefault();
  });
});

.about-header-container {
  margin-left: 80px;
  margin-top: 10px;
  font-size: 15px;
}

.about-header-container>a {
  padding-right: 10px;
}


#bio-dashfolio {
  margin-top: 20px;
}


.tablink:active {
  color: red;
}

.tabcontent {
  display:none;
}

.tabcontent.active {
  display:block;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<div class = "dashbolio-about">

    <div class= "about-header-container">
        <a class = "bio-header tablink" href= "#bio-dashfolio"> Bio </a>
        <a class = "timeline-header tablink" href= "#timeline-dashfolio"> Timeline </a>
    </div>

    <div>


        <div class = "tabcontent" id= "bio-dashfolio" >

            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae diam non dolor sodales suscipit in in metus. Proin laoreet eros nibh, ut hendrerit diam pharetra at. Morbi id nisi efficitur, vehicula turpis non, tristique sapien. Sed sed vestibulum massa. Vestibulum fringilla tortor id facilisis tempus. Cras consectetur sapien nibhLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae diam non dolor sodales suscipit in in metus. Proin laoreet eros nibh, ut hendrerit diam pharetra at. Morbi id nisi efficitur, vehicula turpis non, tristique sapien. Sed sed vestibulum massa. Vestibulum fringilla tortor id facilisis tempus. Cras consectetur sapien nibhLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae diam non dolor sodales suscipit in in metus. Proin laoreet eros nibh, ut hendrerit diam pharetra at. Morbi id nisi efficitur, vehicula turpis non, tristique sapien. Sed sed vestibulum massa. Vestibulum fringilla tortor id facilisis tempus. Cras consectetur sapien nibhLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae diam non dolor  </p>

        </div>

        <div class = "tabcontent" id = "timeline-dashfolio">

            <p> Random text is awesome don't you think?! </p>


        </div>
    </div>

</div>