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

时间:2021-05-25

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

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章