针对BootStrap中tabs控件的美化和完善(推荐)

BootStrap中的tabs控件以其简单易用而很受广大开发者的欢迎。但是，它的样式比较单一，如何才能在其原有的基础上做出更加美观的效果呢，我一直在考虑这个问题。另外，Bootstrap中的tabs必须要单击每个选项卡才能实现切换，能否使用Jquery来控制其自动切换，让它过一段时间（如5秒钟）从一个选项卡切换到另一个呢？下面是我的实现过程，首先是tabs部分的html代码：

<div role="tabpanel"> <!-- Nav tabs --> <ul role="tablist"> <li role="presentation"><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> <div role="tabpanel"> <p>

tab1中的内容

</p> </div> <div role="tabpanel"> <p>

tab2中的内容

</p> </div> <div role="tabpanel"> <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控件的美化和完善(推荐)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章: