微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

rush:js;">

tab1中的内容

rush:js;">

tab2中的内容

rush:js;">

tab3中的内容

rush:js;">

这些代码基本和bootstrap中的原生代码是一样的,不用做太大的改动,填入自己的数据即可。

下面来设置tabs的样式,这些样式会覆盖掉bootstrap中的原有样式达到美化tabs的效果

rush:js;">

效果出来之后是这个样子的:

是不是比bootstrap原有的样式要好一些(不过萝卜白菜各有所爱,此处只是介绍实现过程,当然通过修改css你也可以做出其他的样式)

下面看看如何来实现tabs的自动切换,话不多说,直接上代码

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控件的美化和完善(推荐)。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐