QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 选项卡/滑动门 > jQuery tab选项卡排行榜切换代码

原创商用 jQuery tab选项卡排行榜切换代码

jQuery制作tab选项卡和图文排行榜列表切换,适用于畅销小说和商品销量排行榜切换代码。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权保护,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

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

2、head引入js文件

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>

3、body引入HTML代码

<dl class="tab-rank">

	<dt class="hd">
		<h3 class="on"><a href="#">会员活动</a></h3>
		<h3><a href="#">经验分享</a></h3> 
	</dt> 
	
	<dd class="bd"> 
		<ul class="ulList"> 
			<li class="t on">
				<span class="num">1</span> 
				<div class="c"> 
					<div class="pubpic">
						<a href="#"><img src="images/1.jpg" /></a>
					</div> 
					<div class="pubtitle">
						<a href="#">品桃花,赢好礼</a>
						<p>2013/02/15—2013/03/15</p>
					</div> 
				</div>
			</li> 
			<li class="t">
				<span class="num">2</span> 
				<div class="c"> 
					<div class="pubpic">
						<a href="#"><img src="images/2.jpg" /></a>
					</div> 
					<div class="pubtitle">
						<a href="#">中华儿女孝心行动---“熬胶孝敬..</a>
						<p>2012/02/02—2012/02/28</p>
					</div> 
				</div>
			</li> 
			<li class="t">
				<span class="num">3</span> 
				<div class="c"> 
					<div class="pubpic">
						<a href="#"><img src="images/3.jpg" /></a>
					</div> 
					<div class="pubtitle">
						<a href="#">中国贫血关爱行动——复方阿胶浆..</a>
						<p>2012/09/01—2012/09/30</p>
					</div> 
				</div>
			</li> 
			<li>
				<span class="num">4</span> 
				<div class="c"> 
					<div class="pubpic">
						<a href="#"><img src="images/4.jpg" /></a>
					</div> 
					<div class="pubtitle">
						<a href="#">阿胶糕进厨房,健康美丽吃出来</a>
						<p>2012/10/15—2012/12/31</p>
					</div> 
				</div> 
			</li> 
			<li>
				<span class="num">5</span> 
				<div class="c"> 
					<div class="pubpic">
						<a href="#"><img src="images/5.jpg" /></a>
					</div> 
					<div class="pubtitle">
						<a href="#">桃花姬阿胶糕,阿胶达人免费申领..</a>
						<p>2011/04/01—2011/04/25</p> 
					</div> 
				</div></li> 
			<li>
				<span class="num">6</span> 
				<div class="c"> 
					<div class="pubpic">
						<a href="#"><img src="images/6.jpg" /></a>
					</div> 
					<div class="pubtitle">
						<a href="#">秋冬滋补进行时,免费品尝东阿阿..</a>
						<p>2012/09/16—2012/11/30</p>
					</div> 
				</div>
			</li> 
		</ul> 
		
		<ul class="ulList2"> 
			<li class="t">
				<div class="pic">
					<img src="images/1.jpg" />
				</div>
				<div class="con">
					<div class="title">
						<a href="#">解密杨贵妃的倾城容颜,探寻阿胶文化的源远流长!</a>
					</div>
				</div>
			</li> 
			<li class="n">
				<div class="pic">
					<img src="images/1.jpg" />
				</div>
				<div class="con">
					<div class="title">
						<a href="#">阿胶文化之旅,探寻阿胶滋补的秘密!!</a>
					</div>
				</div>
			</li> 
			<li class="n">
				<div class="pic">
					<img src="images/1.jpg" />
				</div>
				<div class="con">
					<div class="title">
						<a href="#">天天吃鸡蛋不利女性健康</a>
					</div>
				</div>
			</li> 
			<li class="n">
				<div class="pic">
					<img src="images/1.jpg" />
				</div>
				<div class="con">
					<div class="title">
						<a href="#">樱桃可治疗贫血带来的妇科病</a>
					</div>
				</div>
			</li> 
			<li class="n">
				<div class="pic">
					<img src="images/1.jpg" />
				</div>
				<div class="con">
					<div class="title">
						<a href="#">桃花姬——吃出好身体,吃出好容颜</a>
					</div>
				</div>

			</li> 
			<li class="n last">
				<div class="pic">
					<img src="images/1.jpg" />
				</div>
				<div class="con">
					<div class="title">
						<a href="#">桃花伊面春常驻,阿胶养容润枯颜</a>
					</div>
				</div>
			</li> 
		</ul>
	</dd> 
</dl> 
 
<script type="text/javascript">
jQuery(".tab-rank li").hover(function(){ jQuery(this).addClass("on").siblings().removeClass("on")},function(){ });
jQuery(".tab-rank").slide({ titCell:"dt h3", mainCell:"dd",autoPlay:false,effect:"left",delayTime:300 });
</script> 
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

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

签到成功!

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

知道了
58福彩 www.639430.com-竞彩专营店-| www.002069.com-各种釉彩大瓶作文| www.464625.com-六开彩什么玩| www.889382.com-神彩奕奕的意思| www.977567.com-体彩什么app好| www.cp9662.com-今日中彩app真假| www.2472.org-竟彩必发-| www.07876.com-中彩那天课文理解| www.232287.com-旺彩双色球手机软件| www.373021.com-彩47平台-| www.961881.com-福彩3d一新彩网| www.35qz.com-体彩哪里能买到| www.017771.com-手机乐赢彩票| www.80138.cc-安徽快三网址| www.jk99.com-3号彩票手机版| www.788386.com-五分彩计算法| www.6156.biz-乐盈网彩票-| www.47390.com-中彩票概率比死| www.020154.com-四川体彩中心地址| www.160734.com-百盈快三出好计算| www.7184.vip-彩宝品牌-| www.203456.com-福彩5d怎么选| www.286566.com-3d彩吧图一版| www.711772.com-时时彩高手杀号技巧| www.796578.com-博冠彩票app下载| www.hd03.com-百胜快三靠谱吗| www.569620.com-好彩娱乐门户网站| www.463936.com-港彩透蜜-| www.93258.com-竞彩变盘啥意思| www.849126.com-竞彩首页竞彩首页| www.915550.com-网易彩票手机客户端| www.979476.com-彩金多少钱一克| www.cp9777.cc-青海西宁快三下载| www.my62.com-福彩三d视频新手| www.93513.cc-800万彩票-| www.107908.com-福彩作弊-| www.372786.com-江苏体彩任三| www.476250.com-e足彩中奖规则| www.37126.cc-天天中福彩-| www.777362.com-江苏e球彩直播软件| www.890471.com-大快三彩票下载| www.957813.com-真帝王宝图彩吧图库| 中国福利彩票www.08588q.com| www.232400.com-足彩的五种玩法| www.966325.com-顶尖彩票兼职| www.15vc.com-6号彩票app-| www.795.website新3d定位胆彩票| www.51230.com-天中好运彩藏机图| www.4820.cm-老版下载即时开彩| 尊彩www.524947.com| www.820516.com-福彩中心人员待遇| www.897110.com-速盈彩票-| www.962343.com-湖北快三今日分析| 55世纪www.202115.com| www.hs87.com-新浪足球彩票单关| www.ya04.com-美高梅韩国快三| www.13ml.com-2017年七星彩| www.82lr.com-中闰彩吧网更懂彩民| www.90159.com-七彩云app官网| www.319753.com-时时彩历史开奖数据| www.091701.com-巨人国际彩票骗局| www.658965.com-彩票怎么查询| www.751656.com-怎么中彩票几率大| www.897778.com-福彩公益用语| www.964892.com-18彩票手机客户端| 旭彩www.565378.com| www.0407.cm-出国买足彩-| www.8688.cc-中彩网体育彩票| www.45852.com-大中华彩票正常的么| www.002324.com-新西兰快三-| www.84pt.com-北控京彩是传销的吗| www.29365.com-七乐彩奖走势图| www.97332.com-古建筑彩绘报价| www.189245.com-江苏快三遗漏值| www.109765.com-分分彩手机自动挂机| www.209256.com-快三爱彩乐湖北| www.294344.com-体彩断组-| www.54if.com-精彩分享平台| www.307884.com-七星彩历史号码大全| www.446115.com-h5彩票开发-| www.561901.com-试刮30彩票-| www.634292.com-新德里彩票必中算法| www.716977.com-彩铅调色-| www.789671.com-酷彩吧安卓版下载| www.919694.com-博彩刷流水-| www.980105.com-彩票站招聘-| www.cp5922.com-买彩票的人都是傻子| www.zq69.com-博彩怎么刷流水赚钱| www.93fd.com-福彩河北快三下载| www.397242.com-七星彩守号守哪些| www.551342.com-财神彩票站-| www.oo37.com-双色球唯彩荐号| www.552496.com-彩名堂计划是假的吧| www.677756.com-体彩大乐中奖结果| www.831577.com-福彩销量下滑原因| www.890125.com-高倍数彩票-| 8618彩票www.8618aa.com| www.694605.com-360篮球彩票| www.897013.com-手机时时彩开奖助手| www.ou86.com-玄学计算彩票| www.64661.com-怎么看福利彩票号码| www.948603.com-福利彩票刮刮卡漏洞| www.it27.com-竞彩网比分直播| www.940067.com-休彩开奖-| www.006588.com-彩票一等奖-| www.518165.com-牛彩彩票是什么| www.773861.com-博彩官方彩票网| www.880546.com-七乐彩开奖今日开奖| www.cai768.cc-百盈快三是什么| www.111834.com-高德彩票-| www.336513.com-爱投彩票提现不到账| www.671873.com-彩店宝下载官网下载| www.775316.com-中彩在线华彩| www.93663.cc-凤凰微彩实体店软件| www.ar82.com-安徽快三遗漏号| www.934017.com-微信美女玩彩套路| www.xq62.com-彩票中奖查询35期| www.433220.com-彩票大奖的得主| www.3qx.com-京彩下载链接| www.039024.com-内蒙古快三派奖活动| www.tm41.com-福利彩票站申请流程| www.944128.com-58彩票平台怎么样| www.704747.com-中国体彩网唯一网站| 99彩票www.363116.com| www.888097.com-五百彩票邀请码| www.597383.com-满堂彩彩票网| www.905914.com-福利彩票老时时彩| 彩神购彩www.csgc4.com| www.55dw.com-体育彩票选点要求| www.21689.cc-求一个体彩店微信| www.qf93.com-体育彩票26选55| www.z95.net-数字彩彩票软件下载| www.91166.cc-日本好彩香烟| www.818948.com-绵阳市福彩中心地址| www.012359.com-免费下载一定牛彩票| www.80gh.com-百盛彩票有人玩吗| www.27528.com-彩票走试图-| www.130942.com-新余彩礼多少钱| www.6579.top-下载彩民之家app| www.744669.com-旧板彩经网走势图| www.gi3.com-彩富网-| www.298275.com-甘肃福彩兑奖中心| www.433110.com-大富翕彩票平台| www.603585.com-梦见自己彩票没中奖| www.756396.com-新粤彩1000论坛| www.908997.com-广西快三二码遗漏表| 博乐彩票www.995772.com| www.63pj.cc-手机彩票聊天室源码| www.dp82.com-81678v快彩-| www.015752.com-网上如何购买七星彩| www.rn18.com-基诺彩票技巧| www.796094.com-彩票预测选号神器| www.062446.com-快三是全国彩票吗| www.859645.com-新彩-| www.539163.com-竞彩玩法说明| www.977462.com-彩票顶呱刮靠谱吗| www.934017.com-微信美女玩彩套路| www.ko.cc-极速快三预测| www.100467.com-105彩票网安全不| www.xy62.cc-澳发彩票网址| www.625766.com-时时彩彩票开奖结果| www.038824.com-彩票中奖地区查询器| www.796440.com-彩票谜语查询| www.202517.com-遵义彩票店几点开门|