<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap选项卡美化Tabs特效</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.demo{ background: #d57d7d;padding: 1.5em 0; }
a:hover,a:focus{
outline: none;
text-decoration: none;
}
.tab .nav-tabs{
position: relative;
border-bottom: 0 none;
}
.tab .nav-tabs li{
text-align: center;
}
.tab .nav-tabs li a{
display: block;
height: 70px;
line-height: 65px;
background: linear-gradient(165deg, transparent 29%, #908a78 30%);
font-size: 15px;
font-weight: 600;
color: #fff;
text-transform: uppercase;
margin-right: 0;
border-radius: 0;
border: none;
position: relative;
transition: all 0.5s ease 0s;
}
.tab .nav-tabs li.active a,
.tab .nav-tabs li a:hover{
background: linear-gradient(165deg, transparent 29%, #efe8d5 30%);
border: none;
color: #908a78;
}
.tab .nav-tabs li a:before{
content: "";
height: 70px;
line-height: 90px;
border-bottom: 70px solid rgba(0, 0, 0, 0.1);
border-right: 10px solid transparent;
position: absolute;
top: 0;
left: 100%;
z-index: 1;
}
.tab .nav-tabs li:last-child a:before{
border: none;
}
.tab .tab-content{
font-size: 14px;
color: #6f6c6c;
line-height: 26px;
background: #efe8d5;
padding: 20px;
}
.tab .tab-content h3{
font-size: 24px;
color: #6f6c6c;
margin-top: 0;
}
.tab .tab-content p{
margin-bottom: 0;
}
@media only screen and (max-width: 480px){
.tab .nav-tabs li{
width: 100%;
margin-bottom: 8px;
}
.tab .nav-tabs li:last-child{
margin-bottom: 0;
}
.tab .nav-tabs li a:before{
border: none;
}
}
</style>
</head>
<body>
<div class="demo">
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<div class="tab" role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#Section1" aria-controls="home" role="tab" data-toggle="tab" rel='nofollow' onclick='return false;'>Section 1</a></li>
<li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab" rel='nofollow' onclick='return false;'>Section 2</a></li>
<li role="presentation"><a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab" rel='nofollow' onclick='return false;'>Section 3</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content tabs">
<div role="tabpanel" class="tab-pane fade in active" id="Section1">
<h3>Section 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros consectetur lobortis. Maecenas nec nibh congue, placerat sem id, rutrum velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt, imperdiet orci semper, rhoncus ligula. Vivamus scelerisque.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section2">
<h3>Section 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros consectetur lobortis. Maecenas nec nibh congue, placerat sem id, rutrum velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt, imperdiet orci semper, rhoncus ligula. Vivamus scelerisque.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section3">
<h3>Section 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros consectetur lobortis. Maecenas nec nibh congue, placerat sem id, rutrum velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt, imperdiet orci semper, rhoncus ligula. Vivamus scelerisque.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>
tab.rar
- babi123了解作者
- HTML开发工具
- 60KB文件大小
- rar文件格式
- 0收藏次数
- 1 积分下载积分
- 0下载次数
- 2020-03-05 16:55上传日期
tab栏切换效果,基于bootstrap,jq
tab.rar
js- jquery-1.11.0.min.js94.1KB
- bootstrap.min.js36KB
- css
- bootstrap.min.css118.4KB
- index.html4.4KB
内容介绍
评论
相关推荐
- tab.rar通过tab实现三个菜单的切换，具有滑动效果。希望大家喜欢
- tab.zipjavascript仿浏览器页面标签切换的TAB选项卡代码
- TabDialog.zipVC++TabDialog对话框源码，浮动在屏幕的最上方，鼠标放上后显示，移走后隐藏起来，仅显示一个小工具条的样式，可创建多个TAb标签，每个都可以关闭，就好是将对话框“钉”在屏幕上一样。
- Tab控件的使用 MFCTabCtrl.rarTAB控件：Tab控件的使用 MFCTabCtrl
- Tab.zipTab 标签切换，可左右滑动切换视图。简单的方法实现的Tab配合ViewPager滑动。
- TAB.rarCXTabCtrl an easier tab control for dialogs and forms
- tab切换效果.rarandroid 页面切换例子(tab切换效果)
- tab.rar动态向TabCtrl中增加工具条的功能，并实现单击响应事件VC
- TAB.rar在同一个页面应用多种TAB的综合实例，可在一个页面中同时布局选项卡，也布局滑动门，或者是二者兼顾。这个问题以前用户就提到过，不知如何在同一页面布置多个选项卡，你可以参考一下这个。 1、支持一个页面多次...
- googlemap(demo).rarjavascript操作GOOGLEMAP地图所有演示程序
最新资源