jquery tab带标题图标的选项卡切换代码



96 383 128



特效描述:tab带标题图标 选项卡切换,

代码结构

1. 引入CSS

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

2. 引入JS

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

3. HTML代码

<div class="banner-box">
	<div class="slide-box">
		<div class="slide-item" style="display:block;"><a href="http://www.97zzw.com"><img src="images/t01b916c314a98b2926.png"></a></div>
		<div class="slide-item"><a href="http://www.97zzw.com"><img src="images/t0173ad5da790686f2a.png"></a></div>
		<div class="slide-item"><a href="http://www.97zzw.com"><img src="images/t012aa03d26132327ff.png"></a></div>
		<div class="slide-item"><a href="http://www.97zzw.com"><img src="images/t016db3f957add48905.jpg"></a></div>
		<div class="slide-item"><a href="http://www.97zzw.com"><img src="images/t01545233baaf36b3ff.png"></a></div>
	</div>
	<div class="snap-box">
		<ul>
			<li class="item-current">
				<img src="images/t01ad8b776418a73434.png">
				<div>
					<p class="item-title">精心挑选,倾情推荐</p>
					<p class="item-intro">推荐精品应用,享受多彩上网生活</p>
				</div>
			</li>
			<li>
				<img src="images/t0103f6406f6b58edac.png">
				<div>
					<p class="item-title">留学评估</p>
					<p class="item-intro">英国美国留学免费评估</p>
				</div>
			</li>
			<li>
				<img src="images/360weidu_icon_48.png">
				<div>
					<p class="item-title">微度新标签页</p>
					<p class="item-intro">采用Html5技术增强的浏览器新标签页</p>
				</div>
			</li>
			<li>
				<img src="images/shopping-48.png">
				<div>
					<p class="item-title">购物袋</p>
					<p class="item-intro">精选精品商家,提供360度比价</p>
				</div>
			</li>
			<li>
				<img src="images/weather.png">
				<div>
					<p class="item-title">中国天气预报</p>
					<p class="item-intro">中国准确的天气预报与万年历(农历)</p>
				</div>
			</li>
		</ul>
	</div>
</div>
<script type="text/javascript">
$('.snap-box').on('mouseenter','li',function(e){
	var $this=$(this)
	var index=$this.index();
	$this.siblings('li').removeClass('item-current');
	$this.addClass('item-current');
	$('.slide-box .slide-item').stop(true,true).not(':eq('+index+')').hide();
	$('.slide-box .slide-item').eq(index).show();
	$('.slide-box-masker').stop(true,true).css({'opacity':'1','display':'block'}).fadeOut("fast");
});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 flash焦点图 flash幻灯片 flashbanner flash图片轮播 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 滑动星星打分 焦点图 幻灯片 轮播图 bar焦点图 其他 带标题的焦点图 选项卡自动切换 鼠标滑过 鼠标悬停 跟随鼠标移动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

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