bootstrap5 tab选项卡鼠标滑过自动切换jq实现方法-优快云博客

本文链接：https://blog.youkuaiyun.com/u012155708/article/details/136376619

文章详细描述了如何使用HTML5和Bootstrap创建一个带有jQuery的导航栏，实现在鼠标悬停时动态切换内容的tab样式。展示了代码片段和相关功能实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html5 tab样式

 <div id="tc" class="row my-3">
    <div class="col-12">
      <ul id="myTab" class="nav nav-pills gap-3 justify-content-center" role="tablist">

        <li class="nav-item" role="presentation">
          <button class="btn btn-outline-success rounded-pill active" id="pill-tab-promotion" data-bs-toggle="pill" data-bs-target="#pill-content-promotion" type="button" role="tab" aria-controls="pill-ms" aria-selected="true">限时抢购</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="btn btn-outline-success rounded-pill" id="pill-tab-hot" data-bs-toggle="pill" data-bs-target="#pill-content-hot" type="button" role="tab" aria-controls="pill-ms" aria-selected="true">热卖ING</button>
        </li>
        <li class="nav-item d-none" role="presentation">
          <button class="btn btn-outline-success rounded-pill" id="pill-tab-best" data-bs-toggle="pill" data-bs-target="#pill-content-best" type="button" role="tab" aria-controls="pill-ms" aria-selected="true">精品推荐</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="btn btn-outline-success rounded-pill" id="pill-tab-new" data-bs-toggle="pill" data-bs-target="#pill-content-new" type="button" role="tab" aria-controls="pill-ms" aria-selected="true">新品发售</button>
        </li>

      </ul>
    </div>
  </div>

  <div class="row m-0 mb-3">

      <div id="myTabContent" class="tab-content col-12 p-0">

        <!--特价-->
        <div class="tab-pane fade show active col-12" id="pill-content-promotion">
       1111
        </div>

        <!--热卖-->
        <div class="tab-pane fade show col-12" id="pill-content-hot">
         222
        </div>

        <!--精品-->
        <div class="tab-pane fade show col-12" id="pill-content-best">
           333
        </div>

        <!--新品-->
        <div class="tab-pane fade show col-12" id="pill-content-new">
          444
        </div>

      </div>

  </div>

Jq实现方法


  <script>

    $(function () {
        tab_Switch('#myTab > li > button', '#myTabContent >div');
    });
    /* tab页自动切换 */
    function tab_Switch(id_1, id_2) {
        // tab页自动切换
        $(id_1).hover(function () { // 悬停
            $(id_1).removeClass("active"); // 移除所有 active 样式
            $(this).addClass("active"); // 给自己添加 active 样式
            $(id_2).removeClass("show active"); // 移除所有show样式
            var cid = $(this).attr("data-bs-target");//相应目标内容id
            $(cid).addClass("show active");		 // 给自己添加 激活样式

        });
    }

  </script>