Question

我正在创建一个包含2个标签的简单应用程序 - 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>

然而，这不是诀窍。我想我已走上正轨，所以请帮助我了解我哪里出错了。提前谢谢！

Answer 1

你的问题在这一行：

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

更改为：

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

标签不能正常运行

1 个答案: