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.285115.com-吉林快三口诀| www.398612.com-七星彩结果直播现场| www.51kj.com-种彩那天-| www.566996.com-3d讨论专区中彩网| www.cp2330.com-百盈快三口诀| www.tt92.com-万能数字型彩票软件| www.828622.com-国际彩票网-| www.s92.net-呼市福彩中心魏主任| www.502876.com-爱投彩票合法不| www.020592.com-七星彩解梦册查码王| www.770067.com-七彩影院-| www.67qo.com-彩票是实名制的吗| www.4308.in-彩票兑奖中心地点| www.8429.pw-江苏竞彩网-| www.317336.com-青岛福彩兑奖中心| www.360424.com-广西福彩快乐十分开| www.575608.com-淄博彩票大奖得主| www.816407.com-跟计划买彩票| 500彩票网www.939096.com| www.275499.com-d9彩票app下载| www.722888.cc-体彩属于哪个部门| www.827596.com-三分彩app下线| www.922182.com-温州快乐彩开奖结果| 福利彩票www.8039n.com| www.726163.com-彩宝贝网双色球预测| www.806886.com-彩票折了还能兑奖吗| www.883535.com-彩票验票码在哪查询| www.957839.com-海南七星彩九组头尾| 中国福利彩票www.08588g.com| www.3243.vip-178彩票网提现| www.813505.com-彩票宁夏-| www.186070.com-快3彩票是不是骗局| www.66494.com-下载速赢彩app| www.2407.top-竞彩店买足彩| www.8282.org-时时彩牛牛怎么玩| www.231632.com-彩票开奖大全号码| www.100143.com-8炫彩福利彩票| www.935191.com-上海11选5爱乐彩| www.231346.com-彩票倍投就是死| www.474668.com-彩客竞猜彩票手机版| www.777916.com-迷彩兔网址-| www.22069.com-时时彩如何长期盈利| www.748798.com-彩虹6号配置要求| www.830409.com-来彩彩票o2o| www.923196.com-彩色透水混凝土报价| 梦想彩票站www.43131q.com| www.144220.com-竞彩三串一加奖| www.236251.com-七星彩票中奖规则| www.417500.cc-重庆时彩时彩选号| www.626829.com-728彩票被坑| www.118425.com-境外彩票网站改网址| www.199564.com-彩之网彩芽-| www.643589.com-立彩佳真瓷胶价格| www.587764.com-旧版万彩吧下载安装| www.736930.com-今日七星彩最新预测| www.019931.com-蒲城彩票店转让| www.112678.cc-七乐彩查询中奖号码| www.564216.com-越南时时彩诈骗案| www.638075.com-竞彩店合伙人| www.721005.com-彩票2元3d走势图| www.563900.com-下载购彩助手| www.72424.cc-青岛快三查询| www.47op.com-南宁体育彩票中心| www.8539.biz-3d时时彩游戏机| www.298577.com-兰州市福利彩票中心| www.62nd.com-义乌市最近的彩票店| www.5164.org-福彩黑圣手字谜| 大赢家彩票平台www.377291.com| www.220776.com-北京快三怎么下载| www.399800.com-来彩彩票020平台| www.546732.com-体彩投注站网上申请| www.681553.com-辽宁省级福彩中心| www.cp164.com-浙江体彩11选5| www.087809.com-必赢彩票技巧| www.770879.com-买彩票彩票选号码| www.01168.com-福彩3d精英心水网| www.l34.me-吉林快三中奖金额| www.233084.com-新浪足球彩票电脑版| www.326506.com-排三列走势图彩宝网| www.7009.xyz-极速3d彩票的玩法| www.28337.cc-体彩大乐透亿元大奖| www.71886.com-刮刮乐彩票领取方式| www.49kq.com-苹果彩膜效果图| www.303993.com-甘肃省福彩天地报纸| www.929159.com-福彩充值-| www.982832.com-任你中彩票-| www.yo0.com-福彩快三怎么了| www.077158.com-买彩票有什么技巧吗| www.873978.com-彩票计算器双色球| www.679055.com-金沙送彩金的网站| www.772111.cc-河北体彩竟彩| www.882626.com-网上的易彩堂可信吗| 乐盈彩票www.gy11.com| www.505208.com-哪个新平台送彩金| www.929135.com-中国福彩网怎么充值| 500彩票www.50064m.com| 福彩www.16878p.com| www.984339.com-警察怎么不抓时时彩| www.nx12.com-黑马西安竞彩快三| www.021741.com-三地彩吧图库寻码图| www.ro31.com-彩之源彩票首页| www.322383.com-竞彩8串28-| www.241522.com-新彩app下载| www.315965.com-怎样找出彩票的漏洞| www.380737.com-辽宁快三下载| www.470865.com-欧洲足彩app| www.231032.com-福彩是什么意思| www.322767.com-全民福彩下载安装| www.385990.com-百度七星彩开奖结果| www.261310.com-广东福彩快乐| www.985966.com-福彩3d彩报图| www.946531.com-福建福彩电脑版| 大赢家彩票www.799845.com| www.oj39.com-吉林省福彩中心在哪| www.8000.gg-博彩四个字的词语| www.28699.cc-一洗彩染发剂| www.613292.com-下载彩票十一选五| www.690970.com-河北邢台彩票中奖| www.343099.com-32彩票手机app| www.163541.com-温州体彩网-| www.515661.com-安徽双色球彩票官司| www.nh91.com-贵宾室彩票-| www.875487.com-高频彩可以赚钱吗| www.06kx.com-清乾隆古铜彩牺耳尊| www.874334.com-齊魯福彩-| www.953252.com-彩票直播-| www.947524.com-体育足彩直播| www.s00.in-广西快三诀窍| www.83jv.com-微发彩票-| www.306520.com-d9彩票平台-| www.406177.com-彩虹物理原理及分析| www.607795.com-亚洲杯竞彩预测| www.655369.com-九五彩票平台| www.8269.net-杨幂丝袜品彩图片| www.566746.com-彩票买单双技巧| www.004590.com-彩迷天地图-| www.115206.com-彩铅画山水画| www.321067.com-掌中彩-| www.091234.com-微微彩票官网| 大玩家彩票www.84499j.com| www.048344.com-三毛第二版彩吧图库| www.220233.com-快三追号利润计算器| www.848919.com-中国彩计划网站| 凤凰彩票www.55228c.com| www.699765.com-彩客站贴吧-| www.0982.cm-粤彩网合买骗局| www.cai366.com-全网最大快三| www.232044.com-旺彩大乐透软件下载| www.301435.com-彩鸿彩票有问题吗| www.365118.cc-蓝精灵彩报图a| www.997906.com-乐彩吧3d折线图| www.3064.org-彩神飞艇计划| www.44rq.com-分分彩网站网址| www.133154.com-快三11的和值表| www.39849.com-彩八彩票下载手机版| www.495351.com-国家彩票中奖上限| www.766677.com-全民彩票1-| www.852995.com-中国体彩直播开奖| www.929161.com-九万彩票可靠吗| 吉利彩票www.66376c.com| www.947.me-365天天彩票下载| www.5951.win-彩票查询下载| www.276835.com-梦想彩票app下载| www.922565.com-深圳足彩分析师|