针对BootStrap中tabs控件的美化和完善(推荐)
发布时间：2020-12-18 00:51:55 所属栏目：安全 来源：网络整理
导读：BootStrap中的tabs控件以其简单易用而很受广大开发者的欢迎。但是，它的样式比较单一，如何才能在其原有的基础上做出更加美观的效果呢，我一直在考虑这个问题。另外，Bootstrap中的tabs必须要单击每个选项卡才能实现切换，能否使用Jquery来控制其自动切换，
|
BootStrap中的tabs控件以其简单易用而很受广大开发者的欢迎。但是，它的样式比较单一，如何才能在其原有的基础上做出更加美观的效果呢，我一直在考虑这个问题。另外，Bootstrap中的tabs必须要单击每个选项卡才能实现切换，能否使用Jquery来控制其自动切换，让它过一段时间（如5秒钟）从一个选项卡切换到另一个呢？下面是我的实现过程，首先是tabs部分的html代码： 这些代码基本和bootstrap中的原生代码是一样的，不用做太大的改动，填入自己的数据即可。 下面来设置tabs的样式，这些样式会覆盖掉bootstrap中的原有样式达到美化tabs的效果 效果出来之后是这个样子的：
是不是比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控件的美化和完善(推荐)。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
