基于jQuery實現Tab標簽選項卡切換特效



65 257 86



特效描述:基于jQuery實現 Tab標簽選項卡 切換特效,基于jQuery實現Tab標簽選項卡切換特效

代碼結構

1. 引入JS

<script src="js/jquery-1.8.3.min.js"></script>

2. HTML代碼

<!-- 代碼部分begin -->
<div class="zzsc">
	<div class="tab">
    	<a href="javascript:;" class="on">js特效</a>
        <a href="javascript:;">flash素材</a>
        <a href="javascript:;">亞當學院</a>
        <a href="javascript:;">在線客服代碼</a>
    </div>
    <div class="content">
    	<ul>
        	<li style="display:block;">js特效內容</li>
            <li>flash素材內容</li>
            <li>亞當學院內容</li>
            <li>在線客服代碼內容</li>
        </ul>
    </div>
</div>
<h1><a href="index.html">效果一</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="index2.html">效果二</a></h1>
<script>
$(function(){
	$(".zzsc .tab a").mouseover(function(){
		$(this).addClass('on').siblings().removeClass('on');
		var index = $(this).index();
		number = index;
		$('.zzsc .content li').hide();
		$('.zzsc .content li:eq('+index+')').show();
	});
	var auto = 1;  //等于1則自動切換,其他任意數字則不自動切換
	if(auto ==1){
		var number = 0;
		var maxNumber = $('.zzsc .tab a').length;
		function autotab(){
			number++;
			number == maxNumber? number = 0 : number;
			$('.zzsc .tab a:eq('+number+')').addClass('on').siblings().removeClass('on');
			$('.zzsc .content ul li:eq('+number+')').show().siblings().hide();
		}
		var tabChange = setInterval(autotab,3000);
		//鼠標懸停暫停切換
		$('.zzsc').mouseover(function(){
			clearInterval(tabChange);
		});
		$('.zzsc').mouseout(function(){
			tabChange = setInterval(autotab,3000);
		});
	  }
});
</script>
<!-- 代碼部分end -->



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


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 選項卡自動切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子