针对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 相关文章推荐
javascript iframe中打开文件,并检测iframe存在否
Dec 28 Javascript
Prototype 工具函数 学习
Jul 23 Javascript
JS实现闪动的title消息提醒效果
Jun 20 Javascript
js与jquery回车提交的方法
Feb 03 Javascript
实例讲解JavaScript中instanceof运算符的用法
Jun 08 Javascript
jQuery简单倒计时效果完整示例
Sep 20 Javascript
javascript中获取元素标签中间的内容的实现方法
Oct 08 Javascript
js获取指定时间的前几秒
Apr 05 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
Dec 16 Javascript
微信公众号服务器验证Token步骤图解
Dec 30 Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 Javascript
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
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
PHP输出英文时间日期的安全方法(RFC 1123格式)
2014/06/13 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
js中匿名函数的创建与调用方法分析
2014/12/19 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
2015/03/18 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
Node.js调试技术总结分享
2017/03/12 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
2017/04/13 jQuery
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
vue打包相关细节整理(小结)
2018/09/28 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
2018/10/26 Javascript
原生JS实现九宫格抽奖
2020/09/13 Javascript
python实现各进制转换的总结大全
2017/06/18 Python
详解python的四种内置数据结构
2019/03/19 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
vim自动补全插件YouCompleteMe(YCM)安装过程解析
2019/10/21 Python
pytorch:实现简单的GAN示例(MNIST数据集)
2020/01/10 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
python 如何区分return和yield
2020/09/22 Python
Chicco婴儿用品美国官网:汽车座椅、婴儿推车、高脚椅等
2018/11/05 全球购物
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
祖国在我心中演讲稿200字
2014/08/28 职场文书
用人单位聘用意向书
2015/05/11 职场文书
工作建议书范文
2019/07/08 职场文书
导游词之神仙居景区
2019/11/15 职场文书
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python
Android自定义scrollview实现回弹效果
2022/04/01 Java/Android
vue实现Toast组件轻提示
2022/04/10 Vue.js