BootStrap中的tabs控件以其簡單易用而很受廣大開發者的歡迎。但是，它的樣式比較單一，如何才能在其原有的基礎上做出更加美觀的效果呢，我一直在考慮這個問題。另外，Bootstrap中的tabs必須要單擊每個選項卡才能實現切換，能否使用Jquery來控制其自動切換，讓它過一段時間（如5秒鐘）從一個選項卡切換到另一個呢？下面是我的實現過程，首先是tabs部分的html代碼：
<div class="tab" role="tabpanel"><!-- Nav tabs --><ul class="nav nav-tabs" role="tablist" style="margin-top:0px;" id="docTabs"><li role="presentation" class="active"><a href="#Section_new"aria-controls="home" role="tab" data-toggle="tab"> 最新</a><li role="presentation"><a href="#Section_week"aria-controls="profile" role="tab" data-toggle="tab">7天熱門</a><li role="presentation"><a href="#Section_month"aria-controls="messages" role="tab" data-toggle="tab">30天熱門</a></ul><!-- Tab panes --><div class="tab-content"><div role="tabpanel" class="tab-pane fade in active" id="Section_new"><p>
tab1中的內容
</p></div><div role="tabpanel" class="tab-pane fade" id="Section_week"><p>
tab2中的內容
</p></div><div role="tabpanel" class="tab-pane fade" id="Section_month"><p>
tab3中的內容
</p></div></div></div>
這些代碼基本和bootstrap中的原生代碼是一樣的，不用做太大的改動，填入自己的數據即可。
下面來設置tabs的樣式，這些樣式會覆蓋掉bootstrap中的原有樣式達到美化tabs的效果
<style type="text/css">.tab .nav-tabs {border-bottom: 0 none;background: #eaeaea;}.tab .nav-tabs li a {background: transparent;border-radius: 0;font-size: 16px;border: none;color: #333;padding: 12px 22px;}.tab .nav-tabs li.active a, .tab .nav-tabs li.active a i {border: 0 none;background:#e67e22;color: #fff;}.tab .nav-tabs li.active a:after {content: "";position: absolute;left: 45%;bottom: -14px;border: 7px solid transparent;border-top: 7px solid #e67e22;}.tab .tab-content {padding: 5px;color: #5a5c5d;font-size: 14px;line-height: 20px;margin-top: 5px;border-bottom: 1px solid #e67e22;}@media only screen and (max-width: 480px) {.tab .nav-tabs, .tab .nav-tabs li {width: 100%;background: transparent;}.tab .nav-tabs li.active a {border-radius: 10px 10px 0 0;}.tab .nav-tabs li:first-child a {border-bottom-left-radius: 0;}.tab .nav-tabs li a {margin-bottom: 10px;border: 1px solid lightgray;}.tab .nav-tabs li.active a:after {border: none;}}</style>效果出來之后是這個樣子的：
是不是比bootstrap原有的樣式要好一些（不過蘿卜白菜各有所愛，此處只是介紹實現過程，當然通過修改css你也可以做出其他的樣式）
下面看看如何來實現tabs的自動切換，話不多說，直接上代碼：
//tabs自動輪換function timer(i){interval=setInterval(function(){$("#docTabs li:eq("+i+") a").tab('show');i++;if(i>2)i=0;},5000);return interval;}$(function(){var i=0;interval=timer(i);//當鼠標懸停在列表區域時暫停輪換$(".tab-pane").mouseover(function(){clearInterval(interval);});//鼠標移開時繼續輪換$(".tab-pane").mouseout(function(){timer(i);});});以上所述是小編給大家介紹的針對BootStrap中tabs控件的美化和完善(推薦)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
