bootstrap tab切換如何讓滑鼠移動自動切換內容
阿新 • • 發佈：2022-05-03
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>