快捷導(dǎo)航

針對(duì)BootStrap中tabs控件的美化和完善(推薦)

更新時(shí)間：2016年07月06日 10:56:26 作者：鄉(xiāng)間小路

這篇文章主要介紹了針對(duì)BootStrap中tabs控件的美化和完善的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧

BootStrap中的tabs控件以其簡(jiǎn)單易用而很受廣大開發(fā)者的歡迎。但是，它的樣式比較單一，如何才能在其原有的基礎(chǔ)上做出更加美觀的效果呢，我一直在考慮這個(gè)問(wèn)題。另外，Bootstrap中的tabs必須要單擊每個(gè)選項(xiàng)卡才能實(shí)現(xiàn)切換，能否使用Jquery來(lái)控制其自動(dòng)切換，讓它過(guò)一段時(shí)間（如5秒鐘）從一個(gè)選項(xiàng)卡切換到另一個(gè)呢？下面是我的實(shí)現(xiàn)過(guò)程，首先是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中的內(nèi)容

</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section_week">
<p>

tab2中的內(nèi)容

</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section_month">
<p>

tab3中的內(nèi)容

</p>
</div>
</div>
</div>

這些代碼基本和bootstrap中的原生代碼是一樣的，不用做太大的改動(dòng)，填入自己的數(shù)據(jù)即可。

下面來(lái)設(shè)置tabs的樣式，這些樣式會(huì)覆蓋掉bootstrap中的原有樣式達(dá)到美化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>

效果出來(lái)之后是這個(gè)樣子的：

是不是比bootstrap原有的樣式要好一些（不過(guò)蘿卜白菜各有所愛(ài)，此處只是介紹實(shí)現(xiàn)過(guò)程，當(dāng)然通過(guò)修改css你也可以做出其他的樣式）

下面看看如何來(lái)實(shí)現(xiàn)tabs的自動(dòng)切換，話不多說(shuō)，直接上代碼：

//tabs自動(dòng)輪換
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);
//當(dāng)鼠標(biāo)懸停在列表區(qū)域時(shí)暫停輪換
$(".tab-pane").mouseover(function(){
clearInterval(interval);
});
//鼠標(biāo)移開時(shí)繼續(xù)輪換
$(".tab-pane").mouseout(function(){
timer(i);
});
});

以上所述是小編給大家介紹的針對(duì)BootStrap中tabs控件的美化和完善(推薦)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: