bootstrap实现标签页，鼠标滑过激活当前选项卡。

最新推荐文章于 2026-05-01 07:25:04 发布

原创最新推荐文章于 2026-05-01 07:25:04 发布 · 3.9k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#bootstrap #标签 #鼠标 #选项卡

收录于

css 同时被 3 个专栏收录

2 篇文章

订阅专栏

1 篇文章

订阅专栏

bootstrap

1 篇文章

订阅专栏

本文介绍如何利用Bootstrap库实现一种特殊效果，即当鼠标滑过时，相应的标签页会自动激活。通过结合HTML和JavaScript代码，可以轻松达到这个功能，提升用户体验。

要实现的效果
这里写图片描述
以下是代码

<ul class="nav nav-tabs" role="tablist" id="myTab">
  <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
  <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
  <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
  <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home">This home</div>
  <div role="tabpanel" class="tab-pane" id="profile">This p</div>
  <div role="tabpanel" class="tab-pane" id="messages">This m</div>
  <div role="tabpanel" class="tab-pane" id="settings">This s</div>
</div>

以下是js代码

    <script type="text/javascript">
       $(function () {
          $('#myTab a').hover(function () {
            $(this).tab('show');
          });
        })
    </script>