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天

知道了
彩票123现在叫什么名字 www.5073.cc-百万彩友官网| www.344525.com-彩61网站大发快3| www.605370.com-彩晶膜生产厂家| www.516078.com-领航彩票网站源码| www.z33.club-新版广西福彩官网| www.526922.com-时时彩技巧总结| www.623097.com-足彩单场推荐| www.783819.com-新加坡福利彩票官网| www.871645.com-七星彩过滤器工具| www.954451.com-日本彩票-| 奔驰彩票www.281877.com| www.070296.com-湖北快三人工计划群| www.226861.com-河内5分彩走势图| www.313506.com-彩神vip-| www.384913.com-网络彩票能赢吗| www.497730.com-辉煌彩票手机版| www.77239.cc-怎么让彩票中奖率高| www.228533.cc-易彩快三整合和值| www.fn.com-广西福彩选号器| www.299981.com-中彩软件-| www.336245.com-上海福彩选四预测| www.457576.com-恆大彩票84849| www.552723.com-9485凤凰彩网| www.652399.com-彩宝网双色球开奖| www.723205.com-常州市福彩中心地址| www.803606.com-6762彩票网下载| www.042722.com-福利彩票公益广告语| www.54925.com-新注册送彩金游戏| www.036138.com-彩票推广引流| www.244712.com-河北快三开奖结| www.02ls.com-世界杯微博彩票分析| www.44lr.com-足彩4串1中奖| www.924044.com-大乐彩透-| www.6288.cn-九彩洗衣液-| www.232336.com-快三虚拟软件下载| www.227911.com-江苏快三群真的假的| www.432668.com-凤凰微彩下载| www.82xw.com-七星彩中奖要求| www.66078.cc-福彩3d怎么选号| www.837503.com-力彩刻字机-| www.994586.com-福彩三的走势图| www.3498.vip-哪种彩票容易中奖| www.778190.com-网易彩票大鱼号| www.973804.com-新2彩票软件| www.cr.com-上海快三出号规律| www.zr05.com-大玩家彩票是骗局吗| www.69574.com-c99彩票com-| www.669810.com-极速快三软件外挂| www.839660.com-体彩中央调查| www.978327.com-60彩票app-| www.qr28.com-彩票公益金-| www.14nf.com-七星彩排列图| www.110430.com-新乐彩11选5开奖| www.268027.com-求668彩票邀请码| www.359858.com-体育彩票哪里买| www.451810.com-阳泉体彩中心电话| www.583908.com-足彩分析ios| www.714250.com-彩神x是-| www.888732.com-中信彩票是真的吗| www.cp3802.com-快三计算方法如下| www.33gi.com-飞来福彩吧微信加入| www.839891.com-山西体彩中奖号码| www.922967.com-亚盘500彩票| www.985424.com-福彩6十1生肖| www.ak17.com-彩票代打骗局兼职| www.528800.com-九天玄女测彩票三| www.822835.com-蓝彩-| www.20ix.com-澳洲彩票兑奖中心| www.269.blue-500彩票5分赛车| www.0550.pw-关于快三的彩票软件| www.820369.com-下载购买福彩票| www.999007.com-天津爱乐彩快乐十分| www.hh47.com-甘肃快三新规则| www.53591.cc-身边有人中过彩票吗| www.331811.cc-电脑版澳客竞彩| www.50cj.com-杭州福彩管理中心| www.0886.date-彩民彩票和中奖彩票| www.47363.com-东莞体育彩票网站| www.47094.com-订婚钱和彩礼钱区别| www.271058.com-彩77app官方版| www.5200.in-信誉好的竞彩2串1| www.45019.com-彩票计划员靠谱吗| www.027893.com-棒棒彩票大发| www.268259.com-福利彩票动物总动员| www.604958.com-体彩顶呱刮规则| www.687032.com-中彩天下彩449| www.757211.com-选三型彩票-| www.816466.com-快三豹通什么意思| www.881682.com-35彩票平台骗局| www.949944.com-广东省体彩中心电话| www.996402.com-福彩双色球综合版| www.ft04.com-买百盈快三的技巧| www.528236.com-彩色画画-| www.656723.com-中彩双色球预测专家| www.731740.com-我在8k彩票app| www.825759.com-山西大清快三真假| www.885611.com-天下好彩彩团网| www.953254.com-彩8彩票游戏平台| www.gk0.com-时时彩中奖规则表| www.775199.com-贵州省快三走势图| GO彩www.ban54.com| www.456273.com-红菜苔彩票-| www.570378.com-彩票app提不了现| www.701766.com-3d彩票怎么算中奖| www.790937.com-福彩预测交流讨论区| www.926150.com-手机里买彩票怎么卖| 非凡彩票www.77210d.com| www.jw08.com-彩铅画樱花-| www.194376.com-正规彩票网-| www.11880.com-大发快开彩有规律吗| www.68219.cc-体育彩票如何中奖| www.qm38.com-博牛彩票合法么| www.865546.com-熊猫彩票-| www.789.me-彩票单式和复式区别| www.6563.biz-彩票18幸运号码| www.17015.com-彩票损坏-| www.382162.com-彩仙阁软件公司| www.40qf.com-霸皇港彩网址| www.831579.com-彩票界动荡-| www.923519.com-收单彩票-| 500万彩票www.03500w.com| www.123335.com-1088彩票网-| www.969800.com-高频彩看走势图技巧| www.08zg.com-尼彩手机壁纸| www.201.pw-儿童彩铅画花朵| www.9745.com-七乐彩走势图彩宝贝| www.237173.com-体彩3l选7开奖号| www.283111.cc-中国体彩排列五直播| www.74934.com-app彩宝店-| www.286455.com-大发快三和值口诀| www.387539.com-幸运5分彩计划软件| www.137408.com-故乡的山歌钟彩媚| www.0261.cn-时时彩杂六有哪些| www.332757.com-赢钱彩是真的吗| www.972062.com-体彩排五走势图| www.mr20.com-彩八苹果版下载| www.550514.com-博彩楼论坛-| www.653473.com-彩票c66-| www.90bz.com-博彩lg平台-| www.566443.com-北京和彩放题餐厅| www.if7.cc-快三怎么买-| www.313067.com-福彩17500字谜| www.44560.com-淘彩tc8co-| www.481694.com-微信快三信誉群| www.310946.com-惠民彩票是套路| www.382983.com-大智慧彩票是真的吗| www.527811.com-时时彩和值玩法| www.671328.com-彩独2破解完整版| www.935216.com-西安多彩批发商城| www.14gh.com-开奖七星彩直播现场| www.855257.com-好彩网网址-| www.905155.com-快乐彩查询夙| www.974854.com-南京体育彩票网| www.xz2.com-上海快三一定牛今天| www.uv62.com-下载彩3-| www.65421.com-福彩2018150| www.886757.com-大大彩票是骗局吗| www.9036.loan-聚鑫乐彩啥东西| www.943801.com-703彩票注册软件| www.323129.com-湖北快三时时彩网站| www.940221.com-彩票福彩3dapp| www.41ti.com-鸿发彩票网app| www.8326.cc-东方彩网是真的吗| www.90330.com-买彩票机选容易中|