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.rd4.com-甘肃快三移漏| www.497.date-即时彩是什么| www.376635.com-关于结婚要不要彩礼| www.213857.com-彩神官方在线| www.345734.com-彩易彩票软件下载| www.616795.com-体彩排列三怎么兑奖| www.712025.com-齐鲁风采七乐彩软件| www.837919.com-博胜彩票官方| www.422500.cc-盈彩吧app下载| www.976140.com-信阳结婚彩礼多少| www.04fv.com-安徽省彩票中心位置| www.287084.com-共赢彩票登录| www.997142.com-3d彩吧图谜-| www.280058.com-3d福利彩票网| www.4328.biz-章鱼彩票是否合法| www.5856.org-彩票丢失可以领奖吗| www.aw08.com-福彩五行绝杀码| www.18yv.com-亿乐彩是黑平台吗| www.2397.shop-四不像青蛙彩票| www.26539.cc-体彩玩法说明| www.022347.com-重庆时时采彩| www.360204.com-彩票排列三开奖| www.579401.com-时时彩组六玩法| www.836127.com-顺丰彩票你中了多少| www.058179.com-彩报忠心-| www.034618.com-篮球彩票-| www.188809.cc-快3彩票开奖| www.869729.com-幸运5星彩开奖结果| www.910230.com-彩报忠心-| www.979401.com-网络快三私彩诈骗| www.hz07.com-体彩5d开讲奖结果| www.17aj.com-球探彩票正规吗| www.1291.cn-福彩快乐三一天开奖| www.012.cm-亿彩国际-| www.257342.com-微彩吧app是什么| www.9850.cc-古建金龙和玺彩绘| www.217701.com-幸运彩票是不是骗局| www.622896.com-福彩3d四版图| www.014328.com-专家预测七星彩号码| www.755729.com-多彩贵州网首页投票| www.17175.com-下载福彩开奖公告| www.99308.com-重庆时时彩购买平台| www.125100.com-厦门彩票-| www.532972.com-新加坡六星彩资料| www.532185.com-买彩票的小技巧| www.870803.com-福彩3d2000朝| 易彩网www.36166r.com| www.152605.com-中国彩吧开奖结果| www.293285.com-易彩堂.登录| www.413512.com-网易彩票下-| www.571829.com-福彩3d试机号体彩| www.509226.com-牛彩彩票下载安装| www.616163.com-609彩票下截| www.764686.com-778彩票下载| www.836907.com-飞翔竞彩诈骗| www.898609.com-足彩让胜什么意思| 500彩票网www.657505.com| www.947441.com-福彩3d购买时间| www.79306.com-华彩人生-| www.7110.net-多赢在线彩票app| www.81665.com-福彩3d几点开奖| www.819292.com-广州集贤庄彩票吗| www.974783.com-双色球一等奖彩民| www.954768.com-今天彩票开奖结果是| www.59oj.com-好彩乐官网-| www.089988.com-中福快彩影视| www.208552.com-彩票专业术语有哪些| www.325829.com-彩经网彩经网| www.413102.com-福彩十五走努图| www.525518.com-时时彩后三组六组三| www.599998.com-旺旺彩票可信吗| www.667447.com-7位数体彩中奖号码| www.771347.com-彩81彩票是真是假| www.838734.com-凤凰微彩实体店软件| www.917972.com-彩虹图片卡通| www.975812.com-四川福彩兑奖规则| www.220343.com-乐彩网论坛下载| www.433443.com-怎样辨别彩票的真假| www.1944.xyz-唐三彩的丽得姿水乳| www.44886.com-99彩票可信吗| www.141238.com-鸿运彩票手机网| www.282229.com-彩票为什么不是直播| www.436251.com-体彩重庆百变王牌| www.604475.com-彩票大奖都是机选| www.772722.com-体彩93期-| www.906731.com-中国体彩开奖时间| www.276672.com-5分钟快三-| www.875892.com-彩票怎样看走势图| www.38534.com-七彩商城app| www.365158.cc-柳州体彩中心在哪里| www.396013.com-福彩放假停售| www.d56.top-百度爱彩票-| www.234798.com-体育彩票竞彩网| www.318103.com-977彩票安卓版| www.440189.com-彩票193期-| www.533910.com-七星彩长条-| www.604687.com-富民彩票骗人的吗| www.670717.com-彩米手机-| www.739837.com-炫乐彩票注册| www.811027.com-福利彩票客服| www.873666.com-输入号码查彩票中奖| www.932915.com-宝马彩票首页| 博友彩www.960121.com| www.169502.com-快三甘肃走势图| www.086054.com-中国彩分分彩公式| www.074164.com-彩票保本投注法| www.74le.com-秋水无痕七星彩| www.657609.com-一元分分彩-| www.037654.cc-彩票大师安装| www.567086.com-彩虹世界儿童画| www.10000.cc-国际极速彩票| www.868223.com-七星彩43结果| www.312288.com-福彩双色球字迷总汇| www.521018.com-微信彩票群套路| www.299889.com-中彩娱乐5分彩| www.353032.com-药京彩怎么使用| www.0756.org-六开彩网址-| www.556903.com-网络彩票赌博怎么样| www.302219.com-中彩娱乐充值骗局| www.vq17.com-福彩三d排例五| www.175620.com-江苏五分快三计划| www.570718.com-福彩什么时候可以买| www.158358.com-竞彩噢澳客-| www.15el.com-红彩彩票网站| www.5964.org-新浪彩票频道电脑| www.883501.com-金百博网络彩票| www.on7.com-江苏快三经验| www.37sw.com-福彩双色球开业时间| www.24294.cc-澳洲时时彩免费计划| www.669226.com-彩票大奖怎么选号| www.840557.com-山西体育彩票11| www.897187.com-长龙助手彩票平台| www.961347.com-彩31彩票平台开发| www.997540.com-968彩票官网| www.dg2.com-十分钟彩票-| www.lh68.com-彩8彩票安卓旧版| www.322551.com-竞彩8串9-| www.751774.com-有没有送钱玩的彩票| www.828567.com-奥地利彩票中最大奖| www.889793.com-快乐彩十二选五| www.949028.com-3d福彩计划胆码| www.985186.com-在线买竞彩竞猜软件| www.cp1777.com-幸运快三在线计划| www.032474.com-彩票店几点开门| www.67rh.com-中国3d彩涂图迷| www.0214.org-必赢彩票是什么意思| www.369914.com-体彩排列三试机号码| www.968447.com-时时彩报案-| www.675613.com-千亿彩票是黑平台吗| www.765861.com-快频彩票是什么意思| www.865707.com-彩02彩票co2| www.920055.com-彩软科技靠谱吗| www.968334.com-安徽彩票中奖记录| 彩票5www.725422.com| www.396863.com-多彩宝app缴费下| www.607398.com-江西彩民中奖| www.770802.com-时时彩推广图片| www.694410.com-头奖彩票网合法吗| www.820014.com-跨省得彩票怎么兑奖| www.837440.com-今天竞彩单关| www.932215.com-今日七星彩结果| www.745459.com-成功彩票网站| www.862363.com-腾讯彩票开奖查询| www.977595.com-彩票哪个app靠谱|