jQuery tab標簽選項卡切換特效



110 436 146



特效描述:tab標簽 選項卡切換 切換特效,jQuery tab選項卡切換,tab標簽選項卡代碼

代碼結構

1. 引入JS

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

2. HTML代碼

<div class="active_tab" id="outer">
	<ul class="act_title_left" id="tab">
		<li class="act_active">
			<a href="#">最新活動</a>
		</li>
		<li>
			<a href="#">熱門活動</a>
		</li>
		<li>
			<a href="#">最受歡迎</a>
		</li>
	</ul>
	<ul class="act_title_right">
		<li>  
			<a href="#">線上活動</a>
		</li>
		<li>
			<a href="#">線下活動</a>
		</li>
		<li>
			<a href="#">巧口排行榜</a>
		</li>
		<li>
			<a href="#">學習中心</a>
		</li>
	</ul>
	<div class="clear"></div>
</div>
<div id="content" class="active_list">  
    <ul style="display:block;">
        <li>
			<a href="#"><img src="images/mdd6.jpg" /></a>
			<a href="#"><h2>巧口英語比賽</h2></a>
			<i>2016-5-11</i>
			<p>在炎熱的夏季,當我們盡情的享受夏日的溫暖,擁抱明媚陽光的時候,你是否知道我們巧口正在舉行比賽呢?</p>
			<a href="#" class="morejia">more>></a>
		</li>
		<hr>
		<li>
			<a href="#"><img src="images/mdd6.jpg" /></a>
			<a href="#"><h2>巧口英語比賽</h2></a>
			<i>2016-5-11</i>
			<p>在炎熱的夏季,當我們盡情的享受夏日的溫暖,擁抱明媚陽光的時候,你是否知道我們巧口正在舉行比賽呢?</p>
			<a href="#" class="morejia">more>></a>
		</li>
		<hr>
		<li>
			<a href="#"><img src="images/mdd6.jpg" /></a>
			<a href="#"><h2>巧口英語比賽</h2></a>
			<i>2016-5-11</i>
			<p>在炎熱的夏季,當我們盡情的享受夏日的溫暖,擁抱明媚陽光的時候,你是否知道我們巧口正在舉行比賽呢?</p>
			<a href="#" class="morejia">more>></a>
		</li>
		<hr>
		<li>
			<a href="#"><img src="images/mdd6.jpg" /></a>
			<a href="#"><h2>巧口英語比賽</h2></a>
			<i>2016-5-11</i>
			<p>在炎熱的夏季,當我們盡情的享受夏日的溫暖,擁抱明媚陽光的時候,你是否知道我們巧口正在舉行比賽呢?</p>
			<a href="#" class="morejia">more>></a>
		</li>
		<hr>
		<li>
			<a href="#"><img src="images/mdd6.jpg" /></a>
			<a href="#"><h2>巧口英語比賽</h2></a>
			<i>2016-5-11</i>
			<p>在炎熱的夏季,當我們盡情的享受夏日的溫暖,擁抱明媚陽光的時候,你是否知道我們巧口正在舉行比賽呢?</p>
			<a href="#" class="morejia">more>></a>
		</li>
    </ul>
    <ul style="display:none;">
       <li>
			<a href="#"><img src="images/mdd7.jpg" /></a>
			<a href="#"><h2>巧口英語比賽</h2></a>
			<i>2016-5-11</i>
			<p>在炎熱的夏季,當我們盡情的享受夏日的溫暖,擁抱明媚陽光的時候,你是否知道我們巧口正在舉行比賽呢?</p>
			<a href="#" class="morejia">more>></a>
		</li>
		<hr>
		<li>
			<a href="#"><img src="images/mdd7.jpg" /></a>
			<a href="#"><h2>巧口英語比賽</h2></a>
			<i>2016-5-11</i>
			<p>在炎熱的夏季,當我們盡情的享受夏日的溫暖,擁抱明媚陽光的時候,你是否知道我們巧口正在舉行比賽呢?</p>
			<a href="#" class="morejia">more>></a>
		</li>
		<hr>
		<li>
			<a href="#"><img src="images/mdd7.jpg" /></a>
			<a href="#"><h2>巧口英語比賽</h2></a>
			<i>2016-5-11</i>
			<p>在炎熱的夏季,當我們盡情的享受夏日的溫暖,擁抱明媚陽光的時候,你是否知道我們巧口正在舉行比賽呢?</p>
			<a href="#" class="morejia">more>></a>
		</li>
		<hr>
		<li>
			<a href="#"><img src="images/mdd7.jpg" /></a>
			<a href="#"><h2>巧口英語比賽</h2></a>
			<i>2016-5-11</i>
			<p>在炎熱的夏季,當我們盡情的享受夏日的溫暖,擁抱明媚陽光的時候,你是否知道我們巧口正在舉行比賽呢?</p>
			<a href="#" class="morejia">more>></a>
		</li>
		<hr>
		<li>
			<a href="#"><img src="images/mdd7.jpg" /></a>
			<a href="#"><h2>巧口英語比賽</h2></a>
			<i>2016-5-11</i>
			<p>在炎熱的夏季,當我們盡情的享受夏日的溫暖,擁抱明媚陽光的時候,你是否知道我們巧口正在舉行比賽呢?</p>
			<a href="#" class="morejia">more>></a>
		</li>
   </ul>
   <ul style="display:none;">
       <li>
			<a href="#"><img src="images/mdd5.jpg" /></a>
			<a href="#"><h2>巧口英語比賽</h2></a>
			<i>2016-5-11</i>
			<p>在炎熱的夏季,當我們盡情的享受夏日的溫暖,擁抱明媚陽光的時候,你是否知道我們巧口正在舉行比賽呢?</p>
			<a href="#" class="morejia">more>></a>
		</li>
		<hr>
		<li>
			<a href="#"><img src="images/mdd5.jpg" /></a>
			<a href="#"><h2>巧口英語比賽</h2></a>
			<i>2016-5-11</i>
			<p>在炎熱的夏季,當我們盡情的享受夏日的溫暖,擁抱明媚陽光的時候,你是否知道我們巧口正在舉行比賽呢?</p>
			<a href="#" class="morejia">more>></a>
		</li>
		<hr>
		<li>
			<a href="#"><img src="images/mdd5.jpg" /></a>
			<a href="#"><h2>巧口英語比賽</h2></a>
			<i>2016-5-11</i>
			<p>在炎熱的夏季,當我們盡情的享受夏日的溫暖,擁抱明媚陽光的時候,你是否知道我們巧口正在舉行比賽呢?</p>
			<a href="#" class="morejia">more>></a>
		</li>
		<hr>
		<li>
			<a href="#"><img src="images/mdd5.jpg" /></a>
			<a href="#"><h2>巧口英語比賽</h2></a>
			<i>2016-5-11</i>
			<p>在炎熱的夏季,當我們盡情的享受夏日的溫暖,擁抱明媚陽光的時候,你是否知道我們巧口正在舉行比賽呢?</p>
			<a href="#" class="morejia">more>></a>
		</li>
		<hr>
		<li>  
			<a href="#"><img src="images/mdd5.jpg" /></a>
			<a href="#"><h2>巧口英語比賽</h2></a>
			<i>2016-5-11</i>
			<p>在炎熱的夏季,當我們盡情的享受夏日的溫暖,擁抱明媚陽光的時候,你是否知道我們巧口正在舉行比賽呢?</p>
			<a href="#" class="morejia">more>></a>
		</li>
   </ul>
</div>
<script>
	$(function(){
		window.onload = function()
		{
			var $li = $('#tab li');
			var $ul = $('#content ul');
			$li.mouseover(function(){
				var $this = $(this);
				var $t = $this.index();
				$li.removeClass();
				$this.addClass('act_active');
				$ul.css('display','none');
				$ul.eq($t).css('display','block');
			})
		}
	});  
</script>



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


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 滑動星星打分 其他 選項卡自動切換 鼠標滑過 鼠標懸停 跟隨鼠標移動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子