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>