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.90763.com-顶呱刮彩票抽奖| www.114695.com-3d彩吧牛彩图库| www.199683.com-福建彩民论坛| www.280928.com-足球竞彩分析网| 彩票坊www.022jx.cc| www.008549.com-8月16号体彩3| www.554405.com-彩之云彩富宝| www.cp9588.com-旺彩苹果版-| www.oy11.com-福彩3d胆码推荐| www.14xh.com-七乐彩哪里摇奖| www.086.loan-中国体育彩票投诉| www.4062.me-炫彩洗衣液-| www.9684.cn-手机c8万彩吧| www.64113.com-竞彩2串1对冲打水| www.026325.com-人人彩票怎样提现| www.104518.com-彩票一直追号会中吗| www.177499.com-福彩3d预测新彩吧| www.253286.com-好彩二-| www.326646.com-乐彩排三论坛| www.399512.com-海南七星彩日日升图| www.641065.com-香港6hck彩库| www.743588.com-中彩网擂台赛图表| www.818658.com-500万彩票旧版本| www.892263.com-能玩福彩3d的软件| www.961783.com-福彩数字3开奖时间| 幸运彩票www.317299.com| www.ht32.com-龙江福利彩票网| www.zs11.cc-深圳一定牛彩票网| www.28ko.com-五星彩票开-| www.0451.site-火箭彩网站-| www.6981.org-七彩云盒子破解| www.21329.cc-澳洲28彩票可靠吗| www.63677.com-投注量竞彩-| www.038340.com-彩31彩票-| www.124885.com-福彩赛车是合法的吗| www.199628.com-贵州快三追号计划| www.272819.com-北京福彩pc蛋蛋| www.375325.com-手机七星彩直播频道| www.500355.com-bf必发彩票-| www.568656.com-阿狸彩票阿莉彩票| www.638198.cc-普陀区体育竞彩店| www.737553.com-彩票输了10万| www.801551.com-686彩票-| www.875383.com-神州彩票方下载| www.977830.com-猫彩素描-| www.vd8.com-三d走势图彩宝网| www.rg67.com-彩票专家赵公明| www.07lo.com-体育彩票返奖率| www.76ou.com-中国体彩足球竞猜网| www.1478.cc-私彩20万是什么罪| www.9348.loan-武汉市福彩中心电话| www.47076.com-秒速时时彩总和计划| www.91261.com-好彩蓝莓爆珠产地| www.051932.com-体彩金码试机号| www.150530.com-江西快三中奖| www.233901.com-河北快三形态图片| www.309050.com-免费送28元彩票| www.378533.com-温州彩票店转让| www.518264.com-时时彩如何上岸| www.585107.com-500彩票网靠谱么| www.661380.com-有彩票专业的大学吗| www.772279.com-柬埔寨彩票骗局| www.858758.com-体彩直选和值遗漏| www.920839.com-彩票双色球中奖条件| www.976559.com-彩礼价格表-| www.mz0.com-幸运快三最全走势图| www.pj35.cc-彩票快3有什么技巧| www.8gc.cc-重庆时时彩霸主软件| www.62ib.com-蓝球竞彩大小分预测| www.0165.top-无彩色系包括| www.7656.top-时时采彩个位算法| www.23335.cc-500彩票提现不了| www.63751.cc-焦作泌阳彩礼多少| www.033705.com-易彩堂注册邀请码| www.122406.com-微信代买彩票| www.187825.com-福建福彩快三遗漏及| www.255110.com-时时彩专业版| www.321013.com-七星彩出过哪些怪号| www.387076.com-好彩投28官网| www.540880.com-易彩—彩民福地登录| www.621591.com-三分彩五分彩| www.684605.com-中国福彩即开型彩票| www.757076.com-什么是选三型彩票| www.901106.com-中国体彩报pdf| www.963410.com-比较大的彩票平台| 8号彩票www.60108v.com| www.el95.com-广西快三技巧必赢| www.ud85.com-5分彩计划软件| www.43.cc-快三半顺中奖有多高| www.62xc.com-丽水市福利彩票中心| www.0025.cc-可以填六位数的彩票| www.8886.net-竞彩8串1真难中| www.37888.com-体彩顶呱刮app| www.76884.com-老彩民快三-| www.021903.com-彩易3d-| www.085207.com-台湾福星彩最快开奖| www.139303.com-笑口常开好彩自然来| www.209262.com-买彩票怎么选号中奖| www.274930.com-618彩票app-| www.413713.com-至尊博彩是什么意思| www.509322.com-利彩摇骰子-| www.608604.com-分分彩71彩票| www.672650.com-3d福彩官方网站| www.739082.com-彩神通破解版| www.801704.com-彩票打印是什么程序| www.870450.com-体育彩票店怎么开| www.992027.com-湖北福彩有几种玩法| www.cp712.com-网络快三能不能玩| www.jn93.com-彩票黑平台不能提现| www.yj44.com-彩38下载官方网站| www.13dy.cc-好彩双爆真假| www.86fo.com-足彩19010-| www.2988.me-万豪彩票是黑平台| www.7878.biz-智胜彩票下载| www.21378.com-网上买彩票诈骗| www.57571.cc-皇冠体彩安全吗| www.069790.com-足球胜负彩必发指数| www.128194.com-华彩国际娱乐登录| www.192052.com-内蒙快三走势图连线| www.254316.com-分分快三开奖在哪开| www.315562.com-局王七星彩奖表规律| www.374122.com-体彩快报1月26日| www.532762.com-7星彩号码机选| www.607877.com-在哪找彩友多店铺| www.669504.com-彩票该怎么选号| www.731446.com-重庆十分彩-| www.791531.com-新浪乐彩提现| www.855073.com-中奖彩票故事| www.908287.com-最新彩票源码| www.956305.com-微信骗买高频彩| www.992901.com-新疆喜乐彩开奖信息| www.cp1.wang-湖北彩票-| www.il36.com-山东彩友沙龙双色球| www.wz20.com-大乐透走势图彩经网| www.05hq.com-画细腻的画彩铅| www.63fa.com-福彩九宫寻宝图| www.773.red-彩色画画图片大全| www.3890.biz-七星彩图库参考| www.8496.loan-彩票中数字的奥妙| www.67222.cc-绵阳福利彩票官网| www.018923.com-福利彩票三d预测| www.073499.com-江苏快三统计图| www.128716.com-福彩刮刮乐种类| www.188145.com-安徽快三怎么投注| www.244555.cc-体彩和值走势图| www.302592.com-萄京彩票网-| www.360890.com-富贵彩害死了多少人| www.428398.com-国外分分彩-| www.511129.com-枫和彩虹天堂的意思| www.568249.com-彩票33提现不到账| www.625053.com-彩票平台话术| www.672105.com-转让福彩机怎么过户| www.723978.com-买彩票与炒股一样吗| www.777036.com-彩播ios版本| www.973609.com-陕西枫安快三查询| www.pz01.com-868彩票下载| www.p15.cc-体彩怎么玩-| www.31rn.com-v8彩票在线购买| www.440.xyz-世界上各国彩票| www.2939.win-彩纸手工-| www.7257.biz-免费彩虹台在线直播| www.20371.com-易彩堂提现系统| www.69703.com-易彩人工计划| www.055507.com-福彩快三规律走势图|