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


Posted in Javascript onJuly 06, 2016

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中tabs控件的美化和完善(推荐)

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

Javascript 相关文章推荐
js汉字转拼音实现代码
Feb 06 Javascript
使用typeof判断function是否存在于上下文
Aug 14 Javascript
JavaScript实现的石头剪刀布游戏源码分享
Aug 22 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
Jan 28 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
Mar 25 Javascript
JS实现购物车特效
Feb 02 Javascript
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
快速解决Vue项目在IE浏览器中显示空白的问题
Sep 04 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 Javascript
JavaScript ES 模块的使用
Nov 12 Javascript
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
jQuery插件dataTables添加序号列的方法
Jul 06 #Javascript
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 #Javascript
js中window.open的参数及注意注意事项
Jul 06 #Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 #Javascript
jQuery 3.0十大新特性
Jul 06 #Javascript
Javascript 基础---Ajax入门必看
Jul 06 #Javascript
jQuery获取浏览器类型和版本号的方法
Jul 05 #Javascript
You might like
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
php部分常见问题总结
2008/03/27 PHP
PHP中替换键名的简易方法示例详解
2014/01/07 PHP
PHP下的Oracle客户端扩展(OCI8)安装教程
2014/09/10 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
php进程间通讯实例分析
2016/07/11 PHP
JavaScript判断一个URL链接是否有效的实现方法
2011/10/08 Javascript
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
jQuery中ajax的get()方法用法实例
2014/12/26 Javascript
js实现网页收藏功能
2015/12/17 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
node+vue实现用户注册和头像上传的实例代码
2017/07/20 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
react中实现搜索结果中关键词高亮显示
2018/07/31 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
脚手架vue-cli工程webpack的基本用法详解
2018/09/29 Javascript
JS数组求和的常用方法总结【5种方法】
2019/01/14 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
2019/02/22 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
[06:44]2018DOTA2亚洲邀请赛4.5 SOLO赛 MidOne vs Sumail
2018/04/06 DOTA
Python 字典dict使用介绍
2014/11/30 Python
Python yield 使用方法浅析
2017/05/20 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
对DJango视图(views)和模版(templates)的使用详解
2019/07/17 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
英国在线购买马术服装:EQUUS
2019/07/12 全球购物
英语专业毕业生自我鉴定
2013/11/09 职场文书
求职信范文英文版
2014/01/05 职场文书
房产代理公证处委托书
2014/04/04 职场文书
搞笑的获奖感言
2014/08/16 职场文书
社区活动总结
2015/02/04 职场文书
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技