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.132224.com-360安全购彩大厅| www.980899.com-彩788平台靠谱吗| www.780287.com-福彩店搬迁申请书| www.868692.com-三宝乐购是什么彩票| www.949348.com-最新彩票中奖新闻| 彩民网www.76520r.com| www.195019.com-彩票开奖结果3d| www.781171.com-彩吧开机号金码查询| www.151674.com-彩票翻倍计算器| www.2188.vip-盛大彩票官方网址| www.080560.com-快三赢钱心得| www.257727.com-中彩手彩票注册不了| www.774417.com-简单水彩画图片| www.898847.com-福彩门户网址是什么| www.cp026.com-江西快三今天预测的| www.514001.com-彩钢升级围挡| www.696636.com-快三平台论坛| www.890524.com-坤彩谢秉坤之子| www.cp547.com-时时彩平台注册送钱| www.7xe.com-中彩票后离婚| www.43oz.com-儿子挂彩是什么意思| www.6985.vip-中国彩票软件下载| www.8270.in-江西福彩助手推荐人| www.380310.com-中国彩票中心官网| www.496408.com-22彩票违法么| www.700098.cc-彩神软件官方手机版| www.987076.com-购彩堂是什么| www.579.cm-时时彩十大代理平台| www.158415.com-竞彩足彩篮球源码| www.446001.com-大圣彩票软件下载| www.468107.com-彩票榜app下载| www.977139.com-永城市彩礼-| www.42rq.com-8p原彩显示没有了| www.8843.me-蓝狐计划博彩| www.057725.com-福彩胆码和杀码| www.152028.com-彩票123更新| www.073308.com-傲赢彩票官网| www.kl0.cc-快三开奖时间表| www.qn08.com-大乐透彩宝贝| www.6uo.com-饭店送彩票活动| www.cp14.com-德州扑克精彩视频| www.666327.com-天天彩报2彩吧图库| www.984724.com-福彩中心将如何改革| www.13nu.com-体彩20选五走势图| www.542814.com-快三信博彩票| www.144622.com-足彩不中反-| www.a32.club-彩票9是提现不了的| www.617116.com-体育彩票多少天过期| www.718052.com-中国体彩票远程培训| www.323280.com-体彩nba赔率| www.280770.com-怎样预测时时彩豹子| www.371700.com-彩票365两个版本| www.475586.com-福利彩票扫码摇大奖| www.557717.com-中国福彩等级| www.624899.com-香港彩富网官方网站| www.256409.com-官方彩zgg-| www.4480.tv-全国彩票培训中心| www.2005.vip-体彩开奖结果任九| www.156976.com-浙江省彩票兑奖中心| www.291192.com-杏彩手机客户端下载| www.467789.com-42500彩票-| www.562197.com-中彩啦软件下载| www.653712.com-快三左转基础教学| www.717666.cc-彩铅画兰花图片大全| www.792574.com-彩票能跨省领奖吗| www.873664.com-三的彩票还有试机号| www.936027.com-e球彩总进球| www.987618.com-快三万能追号计算器| www.ea8.cc-高频彩票十赌十输| www.433438.com-彩票一等奖中奖地区| www.897.cc-新生彩票平台登录| www.7544.me-竞彩店投资-| www.961603.com-500彩票网登录| www.435999.com-中彩网四川福彩网| www.18708.com-彩票336cc-| www.365387.cc-福彩双码遗漏| www.87534.com-彩票网址推荐娱乐| www.96096.com-彩票有法律法规吗| www.507576.com-合肥福彩兑奖处| www.293.red-哪里可以买七星彩| www.0407.tv-足彩吧贴吧-| www.589870.com-dd彩票软件下载| www.511884.com-写实彩铅人物| www.349054.com-彩票工具计算器| www.772410.com-博彩套利方法大全| www.873184.com-彩票胆拖好吗| www.952057.com-彩票违法吗-| 全民彩票www.qm72.com| www.103649.com-九州彩票登录网址| www.879589.com-1288购彩网-| www.949329.com-五福彩票专业版下载| 金冠彩票www.c4523.com| www.yk0.cc-10选5彩票-| www.np06.com-彩票分析选号器| www.n22.online-大型时时彩购彩平台| www.41go.com-官网七星彩网上投注| www.299.space-精准推单骗局足彩| www.741746.com-南京市福利彩票| www.lq62.com-福彩三的字谜总汇| www.579409.com-酷彩铸铁锅是个坑| www.640703.com-荣誉彩-| www.76fw.com-澳洲5分彩有官网吗| www.976680.com-江油彩礼一般多少| www.043622.com-重庆时彩刷返点方法| www.516205.com-用矩阵计算彩票| www.046499.com-天天彩票新址| www.250638.com-中彩彩票ios下载| www.02594.com-福彩吧靠谱不| www.739916.com-爱彩乐快3一分钟| www.981.me-七乐彩单式开奖| www.250718.com-中彩票下载安装| www.v42.shop-玄武彩票app| www.8416.vip-乐彩快三是私盘吗| www.131061.com-洛阳彩礼一般多少钱| www.463926.com-买彩票真的有技巧吗| www.736614.com-彩铅画教程入门| www.55rg.com-福彩三d静候佳音| www.353279.com-京彩客户端-| www.232403.com-高频彩票怎么赚钱| www.756375.com-7星彩直播开奖| www.224155.com-快三怎么打容易中奖| www.125340.com-福彩刮刮卡怎么玩| www.653526.com-新未来彩票是骗局吗| www.581671.com-彩票123网站大前| www.655032.com-算局七星彩旧版本| www.716913.com-二年级彩铅画| www.776444.com-福彩3d追号-| www.832952.com-网易彩票网怎么注册| www.898223.com-香港百彩网免费资料| www.953083.com-吉林快三快彩助手| www.991914.com-时时彩定位杀号方法| www.ao9.cc-网络彩票带赚套路| www.503227.com-鸿彩平台是真是假| www.493643.com-日彩网可以玩吗| www.977594.com-推荐一款彩票app| www.3009.vip-酷彩锅怎么用| www.2045.vip-广东福彩双色球买法| www.709686.com-7天彩票官方彩票| www.437318.com-快三012路怎么算| www.oa98.com-大钱庄彩票购彩大厅| www.032752.com-500彩票怎么注册| www.108309.com-下载彩视577版本| www.188578.com-快三代理待遇怎么样| www.115287.com-体彩绿翡翠规律| www.948055.com-四川省福彩中心| 趣彩网www.qucw7.com| www.z69.shop-高频五分彩走势图| www.258627.com-竞彩足彩-| www.330424.com-快三数据分析统计服| www.930539.com-体彩六加一规则| www.4628.xyz-多次中彩票大奖| www.40rl.com-买3d彩票的软件| www.119696.com-快三小直播-| www.233168.com-快三赢钱技巧规律| www.338987.com-正版体彩排三藏机诗| www.319322.com-快开彩骗局-| www.493224.com-彩票店的成本| www.006.xyz-彩票争霸苹果下载| www.3260.vip-快三走势图赤峰| www.301200.com-下载南方双彩软件| www.390788.com-猜生肖彩票-| www.924914.com-三分时时彩规律| www.cp7758.com-手机买彩票app| www.zr23.com-足彩老盘任九|