bootstrap tab切换如何让鼠标移动自动切换内容
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>
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2016-07-19 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
