时间戳

首页 > 解决方案 > Nav tab li 边框底部问题

jquery - Nav tab li 边框底部问题

问题描述

我正在尝试在 bootstrap4 中制作一个导航选项卡，动画在边框底部从左到右，当我单击其他单词时效果很好但是当我单击任何其他单词的边框底部时，我遇到了一个问题不更改选项卡窗格的项目此问题的任何解决方案？

完整代码：链接

function activaTab(tab) {
  $('.nav-tabs a[href="#' + tab + '"]').tab('show');
};

activaTab('aaa');

const items = document.querySelectorAll(".nav-tabs li");
items.forEach((item) => {
  item.addEventListener("click", () => {
    document.querySelector("li.active").classList.remove("active");
    item.classList.add("active");
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#aaa" data-toggle="tab">Main Skills</a></li>
    <li><a href="#bbb" data-toggle="tab">Experience</a></li>
    <li><a href="#ccc" data-toggle="tab">Education & Certification</a></li>
  </ul>
  <div class="tab-content" id="tabs">
    <div class="tab-pane" id="aaa">
      <p style="font-size: 18px; margin-left:20px; padding-top: 3px; ">User experience design - UI/UX</p>
    </div>
    <div class="tab-pane" id="bbb">
      <p style="font-size: 18px; margin-left:20px; padding-top: 3px;">Front End Designer - RGD Group</p>
      <p style="font-size: 16px; margin-left:20px;">2020 - Current</p>
    </div>
    <div class="tab-pane" id="ccc">
      <p style="font-size: 18px; margin-left:20px; padding-top: 3px; ">Diploma in Civil Enginnering - Florida University</p>
    </div>
  </div>
</div>

标签： jquerycss

解决方案

推荐阅读