针对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(JQuery)操作Array的相关方法介绍
Feb 11 Javascript
删除javascript所创建子节点的方法
May 21 Javascript
Bootstrap每天必学之表单
Nov 23 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 Javascript
bootstrap-Treeview实现级联勾选
Nov 23 Javascript
在Vue组件上动态添加和删除属性方法
Feb 23 Javascript
iview日期控件,双向绑定日期格式的方法
Mar 15 Javascript
Vue中的v-for循环key属性注意事项小结
Aug 12 Javascript
javascript实现遮罩层动态效果实例
May 14 Javascript
Fetch超时设置与终止请求详解
May 18 Javascript
JS阻止事件冒泡的方法详解
Aug 26 Javascript
关于element-ui表单中限制输入纯数字的解决方式
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
对Session和Cookie的区分与解释
2007/03/16 PHP
php 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
php实现粘贴截图并完成上传功能
2015/05/17 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
javascript 函数式编程
2007/08/16 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
基于node.js制作简单爬虫教程
2017/06/29 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
JS多个异步请求 按顺序执行next实现解析
2019/09/16 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
2020/07/01 Javascript
Python使用新浪微博API发送微博的例子
2014/04/10 Python
Python之py2exe打包工具详解
2017/06/14 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
Django数据库操作之save与update的使用
2020/04/01 Python
英国领先的办公用品供应商:Viking
2016/08/01 全球购物
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
c/c++某大公司的两道笔试题
2014/02/02 面试题
linux面试题参考答案(6)
2016/06/23 面试题
教师自荐信范文
2013/12/09 职场文书
男方父母婚礼答谢词
2014/01/25 职场文书
小学中秋节活动方案
2014/02/06 职场文书
党员四风剖析材料
2014/08/27 职场文书
先进单位事迹材料
2014/12/25 职场文书
参加招聘会后的感想
2015/08/10 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python