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天

知道了
悟空彩票 www.426109.com-旭彩网怎么样| www.760514.com-西安三彩集团怎么样| www.38016.com-竞彩购彩大厅| www.33122.com-上海福利彩票兑奖| www.849320.com-福彩上海快3开奖景| 9号彩票www.80767b.com| www.5dt.com-彩友资料-| www.28278.cc-正版彩票指南彩报纸| www.017577.com-亿娱彩票-| www.386077.com-足球彩票在哪| www.4964.biz-特彩吧好彩堂| www.024653.com-福彩积分卡兑换| www.205445.com-喜乐彩票-| www.310301.com-彩票会员123官网| www.798879.com-竞彩足球进球数| www.883693.com-彩之王下载安装| www.981309.com-河北竞彩官方网站| www.tu0.cc-快三二同号复选推荐| www.xg90.com-6000彩票app| www.038967.com-中国福利彩票交流群| www.69232.com-众搏彩票-| www.126467.com-创彩网app下载| www.849638.com-3分时时彩计划软件| www.949507.com-360购彩计算器| 大赢家彩票平台www.910576.com| www.987299.com-竞彩大小球怎么看| www.ed95.com-彩神邀请码最新| www.307924.com-淘宝买彩票可靠吗| www.413171.com-足彩研究方法| www.522643.com-时时彩龙虎怎么分| www.593619.com-七彩云投屏-| www.671283.com-彩办公大师-| www.755388.com-鸿运彩票网真假| www.835627.com-福彩3d双色球字迷| www.902372.com-体彩自助彩票机| www.966707.com-宝马彩票安卓下载| 大赢家彩票平台www.610875.com| www.395750.com-七乐彩每周开奖几次| www.529757.com-特区彩票论坛特| www.660120.com-全天重庆彩龙虎计划| www.750475.com-明天七星彩预测号码| www.40265.com-瑞彩祥云彩票微信群| www.800415.com-网上什么彩票赚钱| www.880579.com-快三推算图怎么看| www.955119.com-开彩彩票-| 8816彩票www.8816x.com| www.c44.tv-网易彩票3d走势图| www.586.mobi-男子桥洞研究彩票| www.06770.com-双彩原创字谜总汇| www.88494.cc-665彩票网-| www.203021.com-湖北福彩网中奖公告| www.022071.com-手机打彩票是什么| www.102133.com-菲律宾彩天下合法吗| www.231082.com-彩票在线万能倍投器| www.356961.com-送彩票代表什么| www.823115.com-布衣图库好彩网| www.021836.com-福彩3d水果图正版| www.000549.com-亚博竞彩下载| www.35lf.com-青蛙彩47期特马图| www.000865.com-360足球竟彩比分| www.122068.com-福彩便民民-| www.89611.cc-黄鹤楼迷彩烟价钱| www.613721.com-第19009期体彩| www.26pv.com-澳客网胜负彩| www.113299.com-网络购彩安全吗| www.003420.com-菲律宾网络彩票诈骗| www.vy69.com-快三能在手机上买吗| www.13112.cc-最新奥盘足彩| www.83bf.com-移动和彩印怎么设置| www.c19.cc-七星彩中奖号码查询| www.087201.com-彩票手机投注软件| www.696864.com-时时彩专业版软件| www.223418.com-陕西体彩兑奖地点| www.79599.com-银川彩票店转让信息| www.037431.com-彩乐论坛网址| www.105831.com-491彩票四不像| www.995941.com-足彩19046期| www.183073.com-大发快三走势图官网| www.24219.com-彩铅画古风少女| www.086136.com-足彩进球彩玩法介绍| www.909795.com-购乐彩网址-| www.985405.com-足彩返还率怎么看| www.ta7.cc-新疆时时采彩开奖| www.43sv.com-竞彩复式投注表价格| www.87be.com-湖北体彩中心| www.793056.com-胜彩娱乐-| www.326248.com-彩宝骗局-| www.431334.com-新粤彩跑狗图| www.561763.com-快三共有多少个号| www.658586.com-中乐彩登录网址| www.770913.com-上海彩虹冰淇淋机| www.872204.com-贵阳市体彩管理中心| www.947191.com-二分彩开奖记录| www.997181.com-中彩网wap网址| www.nw19.com-五分彩开奖查询| www.36og.com-一百万彩票的网址| www.128012.com-彩虹宝宝主题曲| www.547357.com-私彩接口-| www.607836.com-福利彩票东方七乐彩| www.677426.com-港龙彩票登录网址| www.749687.com-家彩开奖双彩论坛| www.818559.com-竞彩二串一打水| www.898525.com-3d彩民乐-| www.960490.com-三亿彩票-| 500彩票www.50080c.com| www.203499.com-彩票玩法规则| www.330604.com-掌上购彩七天彩平台| www.425448.com-重庆时时彩遗漏数据| www.53199.cc-奇趣分分彩官网平台| www.020549.com-福彩旗下-| www.644033.com-九州彩票代打| www.020843.com-彩票平台租用| www.287.live-领航缔彩-| www.009121.com-重庆时彩走势图| www.099309.com-360购彩计算器| www.fr81.com-中彩网一分快三技巧| www.57829.cc-爱乐透彩票新版网址| www.68642.com-尊彩客户端下载| www.199555.cc-上海快三遗漏号码| www.320042.com-福彩图迷字谜总汇| www.593941.com-好彩网站-| www.70cq.com-湖北省福彩发行中心| www.ri29.com-快三假盘-| www.475.in-中国彩票论坛| www.400186.com-彩c02彩票登录| www.543887.com-3d彩报第三版图| www.356349.com-凯利公式赌高频彩| www.85435.com-七星彩18147| www.131576.com-四川彩礼-| www.758548.com-北京快三大小| www.006982.com-分分钟快三有规律吗| www.512957.com-好运快三有规律吗| www.602150.com-好想买彩票中大奖| www.665216.com-703彩票投注站点| www.735872.com-怎么考取彩票分析师| www.802210.com-彩友多下载安装| www.864008.com-123彩票提不了款| www.919184.com-最安全时时彩网站| www.970743.com-靠谱的彩票代购网站| www.cai0511.com福彩快3官网app| www.11945.com-微彩是合法的吗| www.647825.com-四川体彩十一选五| www.535595.com-福彩是要几位数| www.52239.com-试玩金过3关送彩金| www.065285.com-中国竟彩网页| www.9978.in-倍投快三能赚钱吗| www.037236.com-赛车彩票软件| www.bp.com-中国福彩快三视频| www.99183.cc-竞彩直播新浪| www.360606.com-足彩独赢-| www.521948.com-亿彩网app下载| www.084433.com-湖北快三规律破解| 全民乐彩票www.qml7.com| www.096067.com-体育彩票的种类| www.155791.com-泜彩电子走势图| www.288391.com-谁会玩大发快三| www.343089.com-69880神彩网| www.425685.com-北京时时彩规律大全| www.535255.com-彩票五位中奖号码| www.633859.com-七彩教育集团总部| www.819777.com-哪个星座买彩票会中| www.503025.com-c语言体彩-| www.90hj.com-体彩排列3和值遗漏| 彩票5www.199207.com|