bootstrap tab切换如何让鼠标移动自动切换内容

时间：2021-06-19 15:52:24

　　bootstrap集成了很多功能，比如nav-tabs组件，可以将相似的内容集中在一个区块中展示。bootstrap tab切换默认是要点击才会切换的，如何实现鼠标移动就自动切换呢？如下图所示，光标移动到“资讯中心”不用鼠标单击就马上显示相应的文章列表。

bootstrap tab切换如何让鼠标移动自动切换内容

　　这个案例中用两次调用nav-tabs切换，如果不需要可以删除第二次调用，并删除javascript语句中的tabs-4、5、6就可以了

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Bootstrap tabs选项卡 鼠标经过效果</title>

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

  <div class="row">

    <ul class="nav-tabs nav" id="tabs1">

      <li class="active"><a href="#tabs-1">关于我们 </a></li>

      <li><a href="#tabs-2">资讯中心</a></li>

      <li><a href="#tabs-3">联系我们 </a></li>

    </ul>

    <div class="tab-content" style="height: 80px; padding-top: 0.6em; border-bottom: dashed #ddd 2px;">

      <div class="tab-pane active" id="tabs-1">

        <p>***工程有限公司是一家专业的装修服务机构<br/>

            省心，省力，省时更省钱<br/>

            轻松装修时代。 </p>

      </div>

      <div class="tab-pane" id="tabs-2">

        <ul>

          <li><a href="#" target="_blank">室内家具摆放 切忌四种摆放方法</a></li>

          <li><a href="#" target="_blank">成就家居客厅好风水需要注意的六</a></li>

          <li><a href="#" target="_blank">九款创意背景墙设计</a></li>

        </ul>

      </div>

      <div class="tab-pane" id="tabs-3">

        <p>电话：13800000000<br/>

          QQ：17000000<br/>

             地址：厦门**** </p>

      </div>

    </div>

  </div>

  <div style="height: 2em;"></div>

  <!--第二次调用-->

  <div class="row">

    <ul class="nav-tabs nav" id="tabs2">

      <li class="active"><a href="#tabs-4">客厅 </a></li>

      <li><a href="#tabs-5">房间</a></li>

      <li><a href="#tabs-6">厨房</a></li>

    </ul>

    <div class="tab-content" style="height: 80px; padding-top: 0.6em; border-bottom: dashed #ddd 2px;">

      <div class="tab-pane active" id="tabs-4">

        <p>客厅欧式装修方案大全</p>

      </div>

      <div class="tab-pane" id="tabs-5">

        <p>房间海洋风装修方案</p>

      </div>

      <div class="tab-pane" id="tabs-6">

        <p>厨房高大上装修案例展示</p>

      </div>

    </div>

  </div>
<!--第二次调用结束-->


      <script>

        $(function () {

            $("#tabs1 a").mousemove(function (e) {

                $(this).tab('show');

            });

            $("#tabs2 a").mousemove(function (e) {

                $(this).tab('show');

            });

            $("#tabs3 a").mousemove(function (e) {

                $(this).tab('show');

            });

            $("#tabs4 a").mousemove(function (e) {

                $(this).tab('show');

            });

            $("#tabs5 a").mousemove(function (e) {

                $(this).tab('show');

            });

            $("#tabs6 a").mousemove(function (e) {

                $(this).tab('show');

            });

        });

    </script>

</div>

</body>

</html>

相关文章