Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包含标签页组件。 然其组件是通过点击经行切换的，然而在开发过程中，很多时候我们需要鼠标经过就进行切换的滑动门效果。 经过最近对bootstrap的学习,整理出了鼠标经过经过的标签页。
图片效果
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <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 href="http://688hy.com/dist/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://688hy.com/dist/js/bootstrap.min.js"></script> <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'); }); }); </script> </head> <body> <div class="container"> <div class="row" style="margin-top:100px;"> <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"> <div class="tab-pane active" id="tabs-1"> <p>卢工装饰设计工程有限公司是一家专业的装修服务机构，行走于省心，省力，省时更省钱的轻 松装修时代。以其新锐的设计理念，独特的运营模式，专业的市场观点。科学的技术施工。卢 工装饰以形象为先导，以思想国际化，人才优等化为指导。系统的提升了设计实力，完善资料。 施工工艺及工程管理在未来的发展中继续巩固和不断提升核心竞争力，不断为消费者创造高品 质的产品。引领装修行业的时尚和潮流。 </p> </div> <div class="tab-pane" id="tabs-2"> <ul> <li><a href="http://688hy.com/Feng/258.shtml" title="室内家具摆放 切忌四种摆放方法阻隔财运" target="_blank" style="">室内家具摆放 切忌四种摆放方法</a></li> <li><a href="http://688hy.com/Feng/257.shtml" title="成就家居客厅好风水需要注意的六大装修盲点 " target="_blank" style="">成就家居客厅好风水需要注意的六</a></li> <li><a href="http://688hy.com/Decorated/256.shtml" title="九款创意背景墙设计" target="_blank" style="">九款创意背景墙设计</a></li> <li><a href="http://688hy.com/Experience/255.shtml" title="9种旋转楼梯设计" target="_blank" style="">9种旋转楼梯设计</a></li> <li><a href="http://688hy.com/Experience/250.shtml" title="家居装修9大忌" target="_blank" style="">家居装修9大忌</a></li> </ul> </div> <div class="tab-pane" id="tabs-3"> <p>电话：0757-22251515<br/> QQ：1753564203<br/> 淘宝店：http://858588.taobao.com<br/> 地址：佛山顺德大良北区街道桂畔路44号铺（即桂畔路与连云路交界处） </p> </div> </div> </div> </div> </body> </html>