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天

知道了
亚洲28 www.549951.com-足彩购彩app| www.7576.in-华彩生活怎么还款| www.755416.com-彩票预测公众号| www.38wj.com-漫画彩铅上色技巧| www.007035.com-关注彩票开奖结果| www.467649.com-彩票图表走势| www.163528.com-易彩娱乐app| www.530620.com-时时彩万能四码| www.386091.com-台湾乐透彩开奖网站| www.636530.com-电视家彩虹台| www.58963.cc-福彩3d投注经验| www.519829.com-网上赌彩票判多少年| www.318524.com-高频彩新规定| www.928978.com-彩福是什么东西| 9号彩票www.80767n.com| www.581093.com-体育七彩票808版| www.671664.com-体彩19058期| www.06211.com-福彩3d中国龙| www.007027.com-彩报第一版图将军印| www.86183.cc-彩票360数字大厅| www.267735.com-凤彩网-| www.420607.com-体彩店多少钱一次| www.573538.com-如何画彩票k线图| www.723236.com-中国双色球福彩网站| www.900104.com-288彩-| www.wv39.com-七乐彩50期走势图| www.938.la-三国杀张星彩皮肤| www.158429.com-体育彩票店北单| www.268840.com-时时乐今天快三| www.348009.com-七乐彩票邀请码| www.427634.com-足彩任九过滤技巧| www.516824.com-中国福彩授权的平台| www.83687.com-射手座买彩票什么号| www.va02.com-福彩开奖中奖规则| www.90219.com-七彩轻云apk| www.65sl.com-福彩湖北30选5| www.2822.date-福彩三d速查表| www.79bg.com-三色彩开奖直播| www.520394.com-奖多多安全购彩页面| www.19303.cc-彩发发预测-| www.040860.com-篮球博彩打水看盘| www.019308.com-快三输了3000了| www.re73.com-怎么计算分分时时彩| www.954854.com-彩票后三是什么意思| 大赢家彩票平台www.760169.com| www.977812.com-篮球彩票在哪买| www.mi69.com-好彩投苹果版下载| www.08ix.com-体彩开机号号| www.150786.com-3d彩票缩水方法| www.536086.com-彩票有重复的数字吗| www.67630.com-斯诺克博彩app| www.986742.com-篮球竞彩比分直插| www.lj37.com-中彩拉到哪里领奖| www.r66.me-福彩快3哪些省有卖| www.41ij.com-福彩大富翁论坛| www.171613.com-七星彩50期走势图| www.4949.cn-迷彩兔电影网| www.30898.com-彩票中大奖的| 500彩票www.50026y.com| www.32968.com-一分彩计划软件| www.181860.com-安微快三预测和值| www.286171.com-江苏快三有几个号| www.807892.com-黑桃k时时彩怎么样| www.885215.com-唐龙聊彩-| www.956069.com-世界杯足彩网易竞猜| 500彩票www.50024b.com| www.637019.com-满彩堂登录网址| www.736721.com-福彩全麦必中解太湖| www.52652.com-怎样看体彩中奖号码| www.vr54.com-快乐彩票乐彩网| www.730673.com-足球竞彩计算器玩法| www.879829.com-网彩真的能赚钱吗| www.984637.com-九鼎彩票平台注册| www.dg42.com-海南七星彩奖表| www.d56.net-腾讯ai彩票-| www.0899.cn-华夏亿成彩票平台| www.387228.com-天天彩票恢复了吗| www.586170.com-天天中彩票吧| www.666386.com-青岛福彩养老院官网| 乐彩网www.lcw997.com| www.963518.com-网上彩票代购软件| www.kw04.com-今日福彩中心开机号| www.964807.com-长春制作彩票走势图| www.092330.com-福建省体彩开奖中心| www.199069.com-福彩极速快3能玩吗| www.298852.com-贵州体育彩票快三| www.381359.com-福利彩票上期开奖| www.510861.com-彩玉石材图片| www.597032.com-吉林快三形势走势图| www.680269.com-体彩害死人-| www.805037.com-金彩网高手网齐中网| www.897336.com-加拿大彩票-| www.974177.com-福彩都有哪些玩法| www.dm4.cc-快三哪里可以玩| www.yn95.com-网上买彩票骗局| www.692442.com-买乐乐彩票有技巧吗| www.785508.com-彩票守号中了4个| www.861408.com-人工分分彩计划| www.960755.com-彩票注册送18| www.cp6667.cc-中国福利彩票软件| www.mf23.com-江苏快三返奖率| www.597267.com-实亿彩票网址| www.687710.com-今天3d彩民乐图库| www.88986.cc-福利彩票店转让合同| www.178284.com-福彩快3害死多少人| www.344578.com-体育彩票排七| www.500789.com-一寸彩色近照| www.279597.com-极速时时彩假| www.071429.com-运彩彩票-| www.228920.com-好彩门户开奖结果| www.354987.com-全球官方彩票网| www.641065.com-香港6hck彩库| www.768689.com-福利彩票利润怎么样| www.979034.com-无嘴好彩-| www.m78.net-卖福彩提成多少| www.444959.com-招彩票店销售员| www.971459.com-发布彩票马甲包违法| www.21uw.com-福利彩票资格考试| www.836170.com-谁有尊彩网下载地址| www.903968.com-彩盈彩票-| www.966430.com-什么是腾讯五分彩| PK彩票www.www.23040.com| www.he62.com-快三最高奖金多少| www.851186.com-许昌彩礼一般多少钱| www.910846.com-篮彩竞猜规则| www.966674.com-五和彩下载-| 杏彩www.00840w.com| www.951691.com-5360彩票怎么样| www.92ea.com-福彩有没有人中奖的| www.857058.com-五分钟快三开奖查询| 幸运彩票www.73166g.com| www.060092.com-彩票开奖是不是直播| www.352897.com-3.6亿中奖彩票图| www.34kn.com-七星彩一次可买几期| www.209913.com-吉林快三我输80万| www.090833.com-刚力彩芽黑执事| www.262215.com-福彩快三胆拖买法| www.is71.com-山东福彩手机投注版| www.464931.com-足彩推荐哪个好排行| www.104211.com-乐彩网是坑人的吗| www.323000.cc-福利彩票双色球机选| www.433655.com-江西快三500期| www.627812.com-玩彩票平台哪个好| www.815536.com-排列五是福彩| www.456477.com-什么彩票送注册金| www.9627.biz-手机彩票外挂| www.019443.com-下载六合即时开彩| www.528286.com-怎么研究彩票双色球| www.731634.com-各种彩票开奖时间| www.256356.com-福彩3d中彩网走势| www.i19.net-华彩赢家彩票骗局| www.033.site-福彩投注站申请| www.69351.cc-彩票机选100注| www.070046.com-火星彩票官网| www.509280.com-曼谷十分彩骗局| www.037360.com-彩民之家a版| www.984645.com-国际彩票注册平台| www.1561.vip-陇彩宝-| www.49443.com-柬埔寨做彩票犯法吗| www.798765.com-盛世彩票线路1| www.805786.com-中国福利彩票第九期| www.671431.com-章鱼彩票派奖| www.945805.com-2018洛阳彩礼| www.114731.com-山东齐鲁彩票双色球|