jQuery tab标签选项卡切换特效



103 409 137



特效描述: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

加群请备注:从官网了解到