bootstrap集成了很多功能，比如nav-tabs组件，可以将相似的内容集中在一个区块中展示。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>

bootstrap tab切换如何让鼠标移动自动切换内容的更多相关文章

  1. html+css+jQuery+JavaScript实现tab自动切换功能

    tab1.html内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  2. jquery Tab默认情况下自动切换

    <!DOCTYPE html><html lang="zh-CN"><head><meta http-equiv="Conten ...

  3. jq demo 轮播图，图片可调用，向左，自动+鼠标点击切换

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. jq demo 轮播图，图片可调用，向上，自动+鼠标点击切换

    1 <!doctype html> <html> <head> <meta http-equiv="Content-Type" conte ...

  5. tab切换效果 网站中的图片自动切换

    网站中的图片自动切换 今天上一套tab切换效果的代码 动图就自己实现吧! 下面贴HTML代码,大体分两部分,图片div和按钮div,代码很容易看懂~ <!DOCTYPE html> < ...

  6. tabs自动切换功能的实现

    <html><head><!-- Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href= ...

  7. HTML+JS+DOM【选项卡自动切换】

    最终效果图(鼠标无操作会自动切换选项卡): <!DOCTYPE html> <html> <head> <meta charset="gb2312& ...

  8. 【温故而知新-Javascript】图片效果（图像震动效果、闪烁效果、自动切换图像）

    1.当鼠标指针经过图像时图像震动效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  9. jquery 图片自动切换

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 问卷调查——答卷

    1.你对自己的未来有什么规划?做了哪些准备?答:对未来的规划,就是像大多数人一样,在学校里有一个好的成绩,掌握扎实的专业基础,然后在国考上得到一个好成绩,得到一个好的工作机会,然后努力工作.目标很简单 ...

  2. css为什么要用悬浮

    如果这个100px的宽度是一个Img,横内元素.右边也是横内元素的话和块级元素是不同的. 2.文字环绕图片. div下有个img然后有个span标签 img最好悬浮,悬浮虽然说脱离文档,但是还是占空间 ...

  3. C#基础知识系列一（goto、i++、三元运算符、ref和out、String和string、重载运算符）

    前言 这两天在网上看到的总结很多,尤其是博客园中的,很多很多,也给了我很多的启发,当然自己也总结过,而且有很多人也给与我一些意见和看法.不管怎样,自己还是先把所谓的基础知识加强巩固下吧. 2014年的 ...

  4. 第三十课：JSDeferred详解1

    本课难度非常大,看一遍,蛋会疼,第二遍蛋不舒服,第三遍应该貌似懂了.初学者莫来,没必要,这完全就是一个研究. JSDeferred是日本高手cho45搞出来的,其易用性远胜于Mochikit Defe ...

  5. angular的工具方法笔记(equals, HashKey)

    分别是angular脏值检测的工具方法equals和 类HashKey的使用方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ...

  6. 完美实现开机启动虚拟WIFI，顺便实现目前的WP8系统使用VPN(7.1修)

    众所周知,windows7系统的机器若带有无线网卡(台式机可以买一个USB无线网卡,京东目前39元,TP-Link的),可以虚拟出wifi,供手机等移动设备使用. 虚拟的WIFI的命了和软件在网上都找 ...

  7. Ibatis学习总结1--ibatis简介和SQL Maps

    最佳维护的一个项目使的是ibatis框架,在闲暇之余将手头的开发手册和平时开发的理解做一下总结,言归正传. 简介 使用 SQL Map,能够大大减少访问关系数据库的代码.SQL Map 使用简单的 X ...

  8. Microsoft Office下载地址

    文件名: cn_office_professional_plus_2016_x86_x64_dvd_6969182.iso 语言: Chinese – Simplified 文件大小:2.41 GB ...

  9. 【POJ 2104】 K-th Number 主席树模板题

    达神主席树讲解传送门:http://blog.csdn.net/dad3zz/article/details/50638026 2016-02-23:真的是模板题诶,主席树模板水过.今天新校网不好,没 ...

  10. ThinkPHP多表联合查询的常用方法

    1.原生查询示例: $Model = new Model(); $sql = 'select a.id,a.title,b.content from think_test1 as a, think_t ...