QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 选项卡/滑动门 > jQuery tab图片列表切换代码

原创商用 jQuery tab图片列表切换代码

jQuery图片选项卡切换,制作建站模板图片tab切换效果。这是一款大气的图片列表选项卡代码。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权?;?,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

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

2、head引入js文件

<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

3、body引入HTML代码

<div class="template">
	
	<div class="title">1000+全行业模板  易操作的设计器</div>
	<div class="subtitle">省时省力,同时满足商家个性化搭建诉求</div>
	<div class="category">
		<ul>
			<li class="active">小程序模板</li>
			<li>微商城模板</li>
			<li>电脑商城模板</li>
		</ul>
	</div>
	<!--内容-->
	<div class="content xcx active">
		<ul>
			<li>
				<div class="img">
					<img src="statics/images/xcx.png"/>
				</div>
				<div class="bg">
					<img src="statics/images/xcxEWM.png"/>
				</div>
			</li>
			<li>
				<div class="img">
					<img src="statics/images/xcx2.png"/>
				</div>
				<div class="bg">
					<img src="statics/images/xcxEWM.png"/>
				</div>
			</li>
			<li>
				<div class="img">
					<img src="statics/images/xcx3.png"/>
				</div>
				<div class="bg">
					<img src="statics/images/xcxEWM.png"/>
				</div>
			</li>
			<li>
				<div class="img">
					<img src="statics/images/xcx4.png"/>
				</div>
				<div class="bg">
					<img src="statics/images/xcxEWM.png"/>
				</div>
			</li>
			<li>
				<div class="img">
					<img src="statics/images/xcx5.png"/>
				</div>
				<div class="bg">
					<img src="statics/images/xcxEWM.png"/>
				</div>
			</li>
			
		</ul>
		<div class="more">
			<a href="#">查看更多</a>
		</div>
	</div>
	<div class="content wsc">
		<ul>
			<li>
				<div class="img">
					<img src="statics/images/wsc.png"/>
				</div>
				<div class="bg">
					<img src="statics/images/wscEWM.png"/>
				</div>
			</li>
			<li>
				<div class="img">
					<img src="statics/images/wsc2.png"/>
				</div>
				<div class="bg">
					<img src="statics/images/wscEWM.png"/>
				</div>
			</li>
			<li>
				<div class="img">
					<img src="statics/images/wsc3.png"/>
				</div>
				<div class="bg">
					<img src="statics/images/wscEWM.png"/>
				</div>
			</li>
			<li>
				<div class="img">
					<img src="statics/images/wsc4.png"/>
				</div>
				<div class="bg">
					<img src="statics/images/wscEWM.png"/>
				</div>
			</li>
			<li>
				<div class="img">
					<img src="statics/images/wsc5.png"/>
				</div>
				<div class="bg">
					<img src="statics/images/wscEWM.png"/>
				</div>
			</li>
			
		</ul>
		<div class="more">
			<a href="#">查看更多</a>
		</div>				
	</div>
	<div class="content dnsc">
		<ul>
			<li>
				<div class="img">
					<img src="statics/images/dnsc.jpg"/>
				</div>
				<div class="bg">
					<img src="statics/images/button.png"/>
				</div>
			</li>
			<li>
				<div class="img">
					<img src="statics/images/dnsc.jpg"/>
				</div>
				<div class="bg">
					<img src="statics/images/button.png"/>
				</div>
			</li>
			<li>
				<div class="img">
					<img src="statics/images/dnsc.jpg"/>
				</div>
				<div class="bg">
					<img src="statics/images/button.png"/>
				</div>
			</li>
			<li>
				<div class="img">
					<img src="statics/images/dnsc.jpg"/>
				</div>
				<div class="bg">
					<img src="statics/images/button.png"/>
				</div>
			</li>
			<li>
				<div class="img">
					<img src="statics/images/dnsc.jpg"/>
				</div>
				<div class="bg">
					<img src="statics/images/button.png"/>
				</div>
			</li>
			<li>
				<div class="img">
					<img src="statics/images/dnsc.jpg"/>
				</div>
				<div class="bg">
					<img src="statics/images/button.png"/>
				</div>
			</li>
			
		</ul>
		<div class="more">
			<a href="#">查看更多</a>
		</div>					
	</div>
	
</div>


<script type="text/javascript">
	$(function(){
		$('.category ul li').click(function(){
			var i = $(this).index();
			$(this).addClass('active').siblings().removeClass('active');
			$('.content').eq(i).addClass('active').siblings().removeClass('active');
		})
	})
</script>	
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
中乐彩票 www.892700.com-彩票01官方-| www.cp744.com-快三网站投注员| www.kf.com-玩彩票算是赌博吗| www.18sa.com-聚亿购彩时时彩| www.404146.com-彩陶王酒价格及图片| www.550451.com-极速时彩开奖记录| www.424782.com-七彩丹霞图片| www.756977.com-永成彩票这个软件| www.903257.com-幸福彩票注册| www.z10.cn-彩票站点怎么盈利| www.117235.com-新宝彩票app下载| www.18583.com-王成周彩票密码表| www.059.bid-澳门好运彩-| www.4655.vip-买彩票会影响运气吗| www.cp3378.com-江苏快三是什么套路| www.9078.biz-七乐彩哪个台直播| www.998188.com-中国福彩发行中心| www.588509.com-天一空彩票与你同行| www.723708.com-易网彩票网预测| www.820339.com-彩票别的店给兑奖吗| www.34565.cc-福彩了d开奖结果| www.201201.com-七星彩预测网| www.138504.com-鸿彩app报警| www.xj9.com-体彩11选五助手| www.q05.cn-中彩手彩票电脑版| www.74kq.com-科彩印务工资怎样| www.cp5133.com-上海快三中奖规则| www.357865.com-152彩票软件| www.430699.com-永利彩票网址| www.eo23.com-一分快三有技巧么| www.57ob.com-二元彩票app| www.yc71.com-彩票时时彩买龙虎| www.35686.cc-竞彩网店地图| www.230599.com-彩运8网站合法吗| www.584222.com-足彩推荐哪个靠谱| www.266197.com-河北快三近50| www.7411.xyz-上海体彩购买地址| www.336960.com-网易世界杯彩票| www.162203.com-鸿运彩票是正规的吗| www.408453.com-体彩世界杯几点停售| www.582392.com-足球进球彩开奖结果| www.560658.com-澳洲三分彩开奖记录| www.798778.com-彩虹8彩票网址| www.915108.com-速彩网官网-| www.cp6116.com-福彩网软件下载| www.260651.com-河北福彩爱彩乐| www.3634.shop-中国体彩网幸运快三| www.385522.com-买彩票输了300万| www.925200.com-彩舟是什么意思| www.35wy.com-沈阳体彩中心地址| www.94234.com-践行责任体彩| www.062915.com-福彩3d怎样买| www.466611.com-七乐彩在哪里兑奖| www.626032.com-华夏鑫彩查询| www.777045.cc-彩宝宝暂停-| www.92264.com-天下移彩票-| www.77209.com-慱发彩票是那里的| www.621171.com-上海众盈彩票| www.699021.com-乐和彩票可靠吗| www.776105.com-欢乐彩票进入网址| www.844110.com-体彩足球胜负开奖| www.903100.com-彩票合买怎么买| www.962261.com-爱彩彩票全天计划| 多乐彩票www.364242.com| www.hs03.cc-彩之家app下载| www.919179.com-正规三分时时彩网站| www.fd98.com-红牛彩票app下载| www.309128.com-网上买彩票的app| www.3739.org-海南七星彩研究论坛| www.86616.com-好彩频道在哪看| 乐点彩票www.992358.com| www.565217.com-毒药独胆福彩今天| www.727666.com-彩霸王心水论淡| www.252833.com-好彩妹图片-| www.517062.com-河北福彩开奖| www.899842.com-体育彩票变更申请书| www.965504.com-百盈时时彩神计划| 汇彩网www.www.hcw266.com| www.kk05.cc-双色球彩票杀号助手| www.957559.com-七星彩大胆杀号| www.cp8887.com-百盈快三怎么分析| www.ni44.com-竞彩分析网站| www.667851.com-福彩是假的-| www.789383.com-卡姿兰彩妆加盟店| www.897195.com-彩票长龙25期| www.991159.com-4scc彩票-| www.6110.com-天空彩论坛-| www.39yo.com-凤凰彩票就是个坑爹| www.081037.com-体彩怎么申请开店| www.gq56.com-河南彩色铝板| www.zf04.com-手机彩票33-| www.413904.com-形容出彩的词| www.960241.com-怎样在手机上买彩票| www.70tt.com-时时彩飞艇直播| www.3273.org-高频彩二十分钟一期| www.07396.com-福利彩票aqq下载| www.237574.com-中国足彩网踩踏视频| www.303154.com-海南七星彩购买网站| www.nv18.com-博彩彩票平台| www.273729.com-福彩双色球规划| 七星彩票www.11qxc.com| www.533115.com-澳门十大博彩官网| www.758146.com-青海体彩十一选五| www.730234.com-第一彩cc-| www.587987.com-新浪中国竞彩网| www.ir28.com-博彩账号被冻结原因| www.948186.com-众彩网双色专家汇总| www.iu4.com-快三单双术语| www.1205.net-网上彩票技巧与方法| www.15770.com-华夏彩票里怎么赚钱| www.i36.cn-福彩都是坑人的| www.122083.com-福建快三和值表| www.960157.com-新彩吧字谜图谜总汇| www.058.in-体彩天下购彩大厅| www.519931.com-酷彩买彩票安全吗| www.639402.com-体彩机多少钱一台| www.bk2.com-彩神争8大发app| www.726831.com-网络彩票作弊软件| www.805216.com-福利彩票骗局揭秘| www.898168.com-爱玩彩票app| www.970134.com-3d牛彩一字定三码| www.cp187.com-152彩票官网| www.m91.in-彩票提现不到账| www.569959.com-七彩捞腌菜官方下载| www.437445.com-陕西省福彩中心人员| www.300692.com-118彩票电脑版| www.825749.com-山西大清快三走势图| www.055523.com-极速快三模拟软件| www.153109.com-时时彩四胆10中九| www.603722.com-永城彩票网站| www.678095.com-常笑体彩店app| www.763505.com-足彩工作室团队招聘| www.832727.com-七彩图画-| www.903485.com-彩票球app-| www.970651.com-彩票高手带计划| 彩61www.624880.com| www.406556.com-彩票系统包网| www.554042.com-福彩广告宣传语| www.697828.com-天天彩票登陆| www.790731.com-福彩3d精选列表| www.vd13.com-正规的彩票网站大全| www.fk66.com-五分快三内部计划| www.4507.xyz-福彩投注计算器| www.23161.cc-福彩3d鞍山毒胆王| www.098998.com-和值15红号快三| www.889023.com-足彩外围是什么意思| www.549411.com-138彩票下载| www.670661.com-福彩水果农场有假吗| www.896668.cc-派彩电子走势图快三| 七彩www.53900f.com| www.6966.vip-时时彩先赢后输| www.1541.xyz-体育彩票兑奖地址| www.976473.com-近期彩票无人领| www.tx83.com-高频彩票追长龙技巧| www.66cg.com-中彩票搞笑图片带字| www.0121.me-春秋彩票取不了钱| www.7380.cm-竞彩店的盈利模式| www.668551.com-体彩图谜字谜| www.2578.biz-电信爱音乐彩铃退订| www.ms7.com-湖湖北快三-| www.5pm.com-天天分分彩开奖结果| www.402766.com-新浪爱彩买不起了| www.554772.com-福彩组合是什么字| www.278511.com-时时彩开奖视频手机|