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天

知道了
彩票123现在叫什么名字 www.956455.com-富贵彩票正规吗| www.69421.com-玩乐彩-| www.079724.com-足球体彩玩法| www.164441.com-独栏彩票啥意思| www.259519.com-时时彩手机开奖软件| www.435528.com-体育彩票申办| www.558457.com-古风女彩铅手绘图片| www.659464.com-今天有大乐透彩票吗| www.794632.com-谁在九州彩票赢过钱| www.951434.com-聚彩app下载| 如意彩票www.853689.com| www.rg24.com-各种釉彩大瓶难度| www.594661.com-彩坛达人三胆| www.825208.com-福彩黄金胆码查询| www.062934.com-福彩3d红人胆码| www.193408.com-大发快三大小规律| www.367508.com-幸运彩票官网骗子| www.557820.com-能赢钱提现快三| www.663890.com-正规秒秒彩平台| www.765597.com-22彩票安全吗| www.646693.com-世界真正职业彩民| www.800095.com-河南福彩中心电话| www.892058.com-时彩彩助手-| www.964473.com-竞彩足球-百度| 彩69www.911924.com| www.85968.com-市体彩中心能兑多少| www.165692.com-668彩票软件| www.323365.cc-时时彩程序出租| www.453255.com-乐彩vip标准版| www.585673.com-天天买彩票腾讯| www.808083.com-优选彩店怎么下载| www.921168.com-神彩争霸不能提现| www.766672.com-学生适合买什么彩票| www.899291.com-足球彩票胜平负开奖| www.495327.com-电子竞技比赛博彩假| www.596871.com-3分快三平台| www.686827.com-苏州快三开奖号| 鑫亿彩www.617069.com| www.8fa.com-玩彩网深圳-| www.897.hk-九宫休彩票图片| www.041294.com-2019年美国彩票| www.153962.com-彩票团队微信兼职群| www.986772.com-快三中奖有多少钱| www.ji91.com-彩票被骗的-| www.19.org-怎么入侵黑彩| www.545.club-兰州的福彩总部在哪| www.7543.in-推店竞彩-| www.42467.com-购彩之家首页| www.5054.xyz-旺彩专家推荐号| www.61786.cc-特区彩票七星彩| www.95zs.com-搜狐彩票图表数据| www.7617.pw-博彩导师-| www.58812.cc-彩票679软件| www.021065.com-拉菲彩票群-| www.137295.com-贵阳省福彩中心| www.238903.com-98vip彩票入口| www.387329.com-怎样贴手机彩膜视频| www.872994.com-彩之星首页-| www.948399.com-今晚福彩3d开机号| 熊猫彩票www.777xm.cc| www.ei83.com-体彩快乐十分钟软件| www.7mh.cc-船彩铅绘画图片大全| www.93te.com-易彩堂经营-| www.4275.xyz-三彩的衣服质量好吗| www.06012.com-49彩票集团风控| www.49238.com-168彩票采集系统| www.96732.com-有钱人买彩票吗| www.064959.com-比较稳的彩票平台| www.133476.com-福利彩票假不假| www.233010.com-新浪足彩冷热指数| www.303513.com-鑫彩网彩票真的吗| www.369684.com-福彩双色球几号停| www.461800.com-买黑彩网站-| www.545964.com-福彩攀枝花电话| www.628789.com-发彩网彩票杀号定胆| www.697869.com-福彩官网开奖结果| www.771403.com-彩虹6号要加速器吗| www.870366.com-阿里巴巴区块链彩票| www.932661.com-重庆时时彩官方玩法| www.980154.com-足彩胜平负计算器| www.uq9.cc-彩票体彩开奖查询| www.pj01.com-搜狐彩票官网| www.5qa.com-足彩中了要交税吗| www.55qy.com-家彩网3d开机号| www.0439.com-懂球帝里面买彩票| www.5451.cc-彩35平台稳定吗| www.02973.com-号百彩票诗词网| www.90ud.com-如何看彩票图| www.68551.com-彩宝贝3d预测汇总| www.328905.com-电子游艺绑定送彩金| www.456336.cc-快钱彩app安全吗| www.603693.com-梦到彩票店关门| www.686067.com-七星彩梦册解梦| www.811401.com-体彩选号技巧| www.910054.com-家彩网首页-| www.974510.cc-彩运来官网手机登录| www.505908.com-888彩票是黑彩吗| www.579394.com-网上打彩票是骗局吗| www.653521.com-云南快三开奖| www.750607.com-彩票全自动挂机软件| www.827009.com-大资本彩票平台下载| www.898879.com-福彩门户谁有网址| www.958324.com-七星彩预测专家汇总| 好彩www.60123y.com| www.5820.biz-体彩排列三的玩法| www.397449.com-彩票每年停几天| www.dl82.com-查一下体彩开奖号码| www.78907.cc-最新彩票3d书籍| www.334323.com-彩票少了一个角| www.403886.com-华夏彩票网站多少| www.488003.com-快三计划一期人工| www.700.hk-竞彩投注计划方案| www.04876.cc-彩票3d彩吧助手| www.79090.com-成功彩票诈骗| www.076722.com-6位数的彩票有哪些| www.222520.com-彩票平台送彩金活动| www.453381.com-彩票站中奖去哪领| www.560856.com-彩票599-| www.726637.com-怎样下载网上买彩票| www.689786.com-微彩娱乐安卓| www.851082.com-天地彩平台注册地| www.966674.com-五和彩下载-| www.530942.cc-时时彩后三杀条件| www.690957.com-彩22彩票-| www.778610.com-双色球乐彩园下载| www.878562.cc-中国福利彩票积| 新盈彩www.xinyc3.com| www.25oq.com-0567彩票app| www.080348.com-518彩官网-| www.36yc.com-七星彩一七位和| www.327336.com-体育彩票今天开奖吗| www.712777.com-互联网彩票吃票| www.789435.com-足彩好的推荐平台| www.856522.com-3d彩票软件破解版| www.923214.com-福彩三d今晚开机号| www.975739.com-体彩7星彩兑奖结果| 幸运彩票www.538699.com| www.ku92.com-上海彩票网站| www.98688.cc-足彩多串过关| www.276675.com-菲律宾彩票骗局| www.365164.cc-5分彩玩法规则| www.449952.com-博彩公司的钱怎么洗| www.528595.com-彩民之家免费资料| www.751847.com-一号店彩票登录| www.1380.cc-购彩平台老品牌| www.8127.biz-天天赢彩票是坑| www.23511.cc-彩票发展史-| www.69784.com-微信国彩骗局揭秘| www.024930.com-澳门新莆京分分彩| www.101687.com-江苏快三漏洞查询| www.171382.com-体彩体彩开奖结果| www.233999.cc-聚彩彩票可靠吗| www.12kr.com-比较靠谱的彩票软件| www.678.cc-彩民彩票世界杯玩法| www.3918.cc-七星彩今日开奖图片| www.8796.cm-什么眼镜能看透彩票| www.586532.com-彩票中的偏态| www.790615.com-3d福彩太湖-| www.61376.cc-网络售彩何时开启| www.62tt.com-cp5000彩票-| www.1986.pro-智慧彩票ios| www.8124.com-彩票3d几点停售| www.27099.com-p3开奖结果乐彩网| www.61021.com-彩票什么是屠龙|