如何实现Bootstrap标签页鼠标悬停切换效果？

架构老林

2026-6-30

Bootstrap标签页鼠标悬停切换实现方案

你的代码核心问题是脚本加载顺序错误——Bootstrap的jQuery依赖需要在Bootstrap本身之前加载，否则Bootstrap无法绑定jQuery插件，导致tab('show')方法失效。

修正步骤：

调换脚本加载顺序，先引入jQuery，再引入Bootstrap
简化悬停触发逻辑，直接对导航按钮调用tab('show')，Bootstrap会自动处理标签页切换和激活样式同步

完整修正代码：

<div class="container">
    <nav class="nav nav-tabs"> <!--nav-pills 会让样式更像菜单，去掉标签页的默认下划线效果-->
        <button data-bs-toggle="tab" data-bs-target="#abaEle" class="nav-link active" type="button">电子产品</button>
        <button data-bs-toggle="tab" data-bs-target="#abaMas" class="nav-link" type="button">男装</button>
        <button data-bs-toggle="tab" data-bs-target="#abaFem" class="nav-link" type="button">女装</button>
    </nav>
    <div class="tab-content">
        <div class="tab-pane active" id="abaEle">
            电子产品标签页内容
        </div>
        <div class="tab-pane" id="abaMas">
            男装标签页内容
        </div>
        <div class="tab-pane" id="abaFem">
            女装标签页内容
        </div>
    </div>
</div>
<!-- 先加载jQuery，确保Bootstrap能识别到它 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- 再加载Bootstrap -->
<script src="lib/bootstrap.bundle.min.js"></script>
<script>
    $(document).ready(function() {
        $(".nav-link").mouseenter(function() {
            // 直接触发当前导航按钮对应的标签页切换
            $(this).tab('show');
        });
    });
</script>