簡潔的jquery tab選項卡標簽帶下劃線滑動選項卡切換代碼



241 960 321



特效描述:tab選項卡 標簽滑動 帶下劃線滑動 選項卡切換,

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/style.css" type="text/css">

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

3. HTML代碼

<div class="case">
	<div class="title cf">
		<h2 class="fl">設計案例</h2>
		<ul class="title-list fr cf ">
			<li class="on">LOGO</li>
			<li>宣傳單</li>
			<li>畫冊</li>
			<li>優惠券</li>
			<li>會員卡</li>
			<p><b></b></p>
		</ul>
	</div>
	<div class="product-wrap">
		<!--案例1-->
		<div class="product show">
			<ul class="cf">
				<li class="ml0">
					<a href="http://www.17sucai.com" class="imgwrap"><img src="images/1.jpg"></a>
					<p class="mt10"> <a href="http://www.17sucai.com">站長素材網站logo... </a></p>
					<p class="pb10">行業類別:藝術攝影,文化體育</p>
				</li>
				<li>
					<a href="http://www.17sucai.com" class="imgwrap"><img src="images/1.jpg"></a>
					<p class="mt10"> <a href="http://www.17sucai.com"> 深圳達文影視傳媒有限公司logo... </a></p>
					<p class="pb10">行業類別:藝術攝影,文化體育</p>
				</li>
				<li>
					<a href="http://www.17sucai.com" class="imgwrap"><img src="images/1.jpg"></a>
					<p class="mt10"> <a href="http://www.17sucai.com"> 深圳達文影視傳媒有限公司logo... </a></p>
					<p class="pb10">行業類別:藝術攝影,文化體育</p>
				</li>
				<li>
					<a href="http://www.17sucai.com" class="imgwrap"><img src="images/1.jpg"></a>
					<p class="mt10"> <a href="http://www.17sucai.com"> 深圳達文影視傳媒有限公司logo... </a></p>
					<p class="pb10">行業類別:藝術攝影,文化體育</p>
				</li>
			</ul>
		</div>
		<!--案例2-->
		<div class="product">
			<ul class="cf">
				<li class="ml0">
					<a href="http://www.17sucai.com" class="imgwrap"><img src="images/2.jpg"></a>
					<p class="mt10"> <a href="http://www.17sucai.com"> 深圳達文影視傳媒有限公司logo... </a></p>
					<p class="pb10">行業類別:藝術攝影,文化體育</p>
				</li>
				<li>
					<a href="http://www.17sucai.com" class="imgwrap"><img src="images/2.jpg"></a>
					<p class="mt10"> <a href="http://www.17sucai.com"> 深圳達文影視傳媒有限公司logo... </a></p>
					<p class="pb10">行業類別:藝術攝影,文化體育</p>
				</li>
				<li>
					<a href="http://www.17sucai.com" class="imgwrap"><img src="images/2.jpg"></a>
					<p class="mt10"> <a href="http://www.17sucai.com"> 深圳達文影視傳媒有限公司logo... </a></p>
					<p class="pb10">行業類別:藝術攝影,文化體育</p>
				</li>
				<li>
					<a href="http://www.17sucai.com" class="imgwrap"><img src="images/2.jpg"></a>
					<p class="mt10"> <a href="http://www.17sucai.com"> 深圳達文影視傳媒有限公司logo... </a></p>
					<p class="pb10">行業類別:藝術攝影,文化體育</p>
				</li>
			</ul>
		</div>
		<!--案例3-->
		<div class="product">
			<ul class="cf">
				<li class="ml0">
					<a href="http://www.17sucai.com" class="imgwrap"><img src="images/3.jpg"></a>
					<p class="mt10"> <a href="http://www.17sucai.com"> 深圳達文影視傳媒有限公司logo... </a></p>
					<p class="pb10">行業類別:藝術攝影,文化體育</p>
				</li>
				<li>
					<a href="http://www.17sucai.com" class="imgwrap"><img src="images/3.jpg"></a>
					<p class="mt10"> <a href="http://www.17sucai.com"> 深圳達文影視傳媒有限公司logo... </a></p>
					<p class="pb10">行業類別:藝術攝影,文化體育</p>
				</li>
				<li>
					<a href="http://www.17sucai.com" class="imgwrap"><img src="images/3.jpg"></a>
					<p class="mt10"> <a href="http://www.17sucai.com"> 深圳達文影視傳媒有限公司logo... </a></p>
					<p class="pb10">行業類別:藝術攝影,文化體育</p>
				</li>
				<li>
					<a href="http://www.17sucai.com" class="imgwrap"><img src="images/3.jpg"></a>
					<p class="mt10"> <a href="http://www.17sucai.com"> 深圳達文影視傳媒有限公司logo... </a></p>
					<p class="pb10">行業類別:藝術攝影,文化體育</p>
				</li>
			</ul>
		</div>
		<!--案例4-->
		<div class="product">
			<ul class="cf">
				<li class="ml0">
					<a href="http://www.17sucai.com" class="imgwrap"><img src="images/4.jpg"></a>
					<p class="mt10"> <a href="http://www.17sucai.com"> 深圳達文影視傳媒有限公司logo... </a></p>
					<p class="pb10">行業類別:藝術攝影,文化體育</p>
				</li>
				<li>
					<a href="http://www.17sucai.com" class="imgwrap"><img src="images/4.jpg"></a>
					<p class="mt10"> <a href="http://www.17sucai.com"> 深圳達文影視傳媒有限公司logo... </a></p>
					<p class="pb10">行業類別:藝術攝影,文化體育</p>
				</li>
				<li>
					<a href="http://www.17sucai.com" class="imgwrap"><img src="images/4.jpg"></a>
					<p class="mt10"> <a href="http://www.17sucai.com"> 深圳達文影視傳媒有限公司logo... </a></p>
					<p class="pb10">行業類別:藝術攝影,文化體育</p>
				</li>
				<li>
					<a href="http://www.17sucai.com" class="imgwrap"><img src="images/4.jpg"></a>
					<p class="mt10"> <a href="http://www.17sucai.com"> 深圳達文影視傳媒有限公司logo... </a></p>
					<p class="pb10">行業類別:藝術攝影,文化體育</p>
				</li>
			</ul>
		</div>
		<!--案例5-->
		<div class="product">
			<ul class="cf">
				<li class="ml0">
					<a href="http://www.17sucai.com" class="imgwrap"><img src="images/5.jpg"></a>
					<p class="mt10"> <a href="http://www.17sucai.com"> 深圳達文影視傳媒有限公司logo... </a></p>
					<p class="pb10">行業類別:藝術攝影,文化體育</p>
				</li>
				<li>
					<a href="http://www.17sucai.com" class="imgwrap"><img src="images/5.jpg"></a>
					<p class="mt10"> <a href="http://www.17sucai.com"> 深圳達文影視傳媒有限公司logo... </a></p>
					<p class="pb10">行業類別:藝術攝影,文化體育</p>
				</li>
				<li>
					<a href="http://www.17sucai.com" class="imgwrap"><img src="images/5.jpg"></a>
					<p class="mt10"> <a href="http://www.17sucai.com"> 深圳達文影視傳媒有限公司logo... </a></p>
					<p class="pb10">行業類別:藝術攝影,文化體育</p>
				</li>
				<li>
					<a href="http://www.17sucai.com" class="imgwrap"><img src="images/5.jpg"></a>
					<p class="mt10"> <a href="http://www.17sucai.com"> 深圳達文影視傳媒有限公司logo... </a></p>
					<p class="pb10">行業類別:藝術攝影,文化體育</p>
				</li>
			</ul>
		</div>      
	</div>
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 焦點圖 幻燈片 輪播圖 bar焦點圖 帶標題的焦點圖 滑動選項卡 滑動切換 圖片滑動 圖片滑塊
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子