js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:js代码_js特效免费下载_JS特效代码网 > 网页特效 > JS常用代码 > js选项卡

jquery Bootstrap选项卡美化Tabs特效代码

发布时间:2017-04-06 16:15:37    您是第0位浏览者

本js特效代码兼容:ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

jquery Bootstrap选项卡美化Tabs特效代码

jquery Bootstrap选项卡美化Tabs特效代码

<!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:focus,a:hover{outline:0;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 .5s ease 0s}    
			.tab .nav-tabs li a:hover,.tab .nav-tabs li.active a{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,.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">Section 1</a></li>    
								<li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab">Section 2</a></li>    
								<li role="presentation"><a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab">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>    
	</body>    
</html>



js选项卡 选项卡 tab

jquery选项卡切换,版块鼠标跟随边框变色特效

tab选项卡切换特效并且带更多按钮

jquery双重切换的tab选项卡特效代码

jquery仿360音乐搜索主页歌手切换选项卡特效

jquery tab选项卡插件支持鼠标滑过、点击、自动切换、数据回调等特效

jquery SuperSlide仿京东首页促销产品tab选项卡切换特效

jquery左右布局的缓动Tab切换选项卡特效

jquery实现网页右下角弹出并且支持tab标签选项卡的图片广告代码

jQuery选项卡风格下拉导航特效

js tab选项卡新闻列表切换特效

jquery鼠标滑过标签选项卡切换特效

jquery焦点选项卡图片切换特效,支持自动播放

JQuery仿网易右侧图文混排展示选项卡滑动层特效

jquery实现可触摸控制的tab选项卡特效

jquery定位滚动tab选项卡效果

jquery选项卡形式图片过滤筛选器特效

jquery图片内容滑动选项卡切换特效

jquery实现带滑块选项卡焦点图片,滚动切换特效

jquery实现选项卡形式,四屏焦点图片轮播特效,带控制的选项卡轮播

jquery实现带左右按钮控制滑动选项卡切换特效

友荐云推荐
大家说 此评论不代表本站观点