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.869871.com-福彩杀号牛材网| www.554454.com-彩票所有排列组合| www.657919.com-599彩票下载安装| www.796187.com-体彩福彩哪个挣钱多| www.925030.com-福利彩票中心官网| 梦想彩票www.33112s.com| www.114591.com-彩圣今日字谜| www.478360.com-彩票兑软件-| www.880169.com-大发快三的技巧| www.087318.com-开门彩双色球预测| www.cr70.com-加盟彩票站赚钱吗| www.388411.com-彩票骰子开大小双单| www.670295.com-武汉福彩店铺转让网| www.172325.com-安微快三今天走势图| www.796262.com-新盈彩正规吗| www.888373.com-128彩票诈骗| www.979968.com-如何申请开彩票店| www.gd8.cc-时时彩诀窍-| www.875026.com-三地彩吧图库寻码图| www.970827.com-迷彩兔网站下载| www.cai1212.com江苏快三害死多少人| www.683913.com-竞彩足彩彩票软件| www.69fl.com-福乐彩票-| www.4331.vip-领奖彩票网址| www.53329.cc-什么是时时彩龙虎和| www.193364.com-延边体彩-| www.693187.com-彩票中奖短信恶搞| www.228870.com-体彩快三开奖| www.787607.com-158彩票靠谱吗| www.562790.com-体育彩票三位数走势| www.63135.com-14中国足彩网投注| www.075011.com-上海市福利彩票站| www.06en.com-33期福彩双色球| www.267.org-郑州纸箱包装彩印| www.062029.com-好彩客ios下载| www.687700.com-139彩票客户端| www.816664.com-昨晚福彩开什么奖| www.390085.com-中彩票几百万| www.7655.pw-双色球彩票长宽尺寸| www.49ts.com-济南体彩中心| www.22217.cc-投36元彩票挣钱| www.037342.com-快三十大秘籍| www.855333.com-3d字谜新彩网| www.954106.com-黑龙江福彩36| www.023707.com-七乐彩红球杀号| www.88271.cc-哪里下载吉彩宝| www.97497.com-聚财神m8彩票| www.380215.com-刷彩网是什么意思| www.359003.com-体肓彩票号码| www.318064.com-福利彩开奖时间每周| www.860926.com-好彩1现场开奖| www.948491.com-福利彩票自助终端机| 600万彩票www.187512.com| www.56pf.com-腾讯分分彩平台排| www.3442.cc-彩神5分快三| www.92po.com-手机千百万彩票| www.023298.com-五分彩怎么玩法介绍| www.660330.com-大数据与测试彩票| www.803489.com-彩票专家计划| www.929065.com-福彩网提现不到账| www.984483.com-财神8彩票网可信吗| www.as27.com-安徽快三和尾走势图| www.uh36.com-彩票是否真实| www.lo66.com-快三违法吗-| www.49od.com-彩票情侣生日选号器| www.334928.com-福彩快3哪些省有卖| www.79991.com-近期体彩排五中奖号| www.369846.com-云彩店二维码| www.236925.com-竞彩足球预测中国网| www.388383.com-百万发平台时时彩| www.592129.com-炫彩粒子怎么弄字| www.960368.com-注册就送的彩票平台| www.ev70.com-大发时时彩有幕后吗| www.cp710.com-快三哪些省份是真的| www.99pm.com-体彩亿元大奖彩票图| www.2425.cc-网上正规买彩票软件| www.024532.com-国民彩票可信么| www.gj14.com-北京市福彩快3助手| www.024060.com-香港1997彩票| www.240845.com-彩神ll平台网址| www.382309.com-体彩排列3彩票| www.876777.com-极速彩票一分钟一期| 彩乐乐www.cll168.com| www.7254.cm-彩虹娱乐棋牌| www.22462.com-因为彩礼闹翻| www.795484.com-体彩大乐透怎么领奖| www.cai928.com-福利快三是什么| www.370278.com-十分彩是什么平台| www.317158.com-彩九怎么样是骗局吗| www.8762.org-七星彩大数据分析| www.215239.com-易彩登陆-| www.sa12.com-红旗彩票群-| www.496133.com-博彩公司合法吗| www.602260.com-祥瑞彩票-| www.699751.com-nba体育彩票分析| www.796802.com-台湾快三-| www.885971.com-实时平台彩-| www.959765.com-手机大发时时彩计划| www.1508.cn-福彩快乐彩开奖号码| www.08407.com-58福彩是正规的吗| www.841234.com-高频彩票大数据| www.921021.com-1818彩票送彩金| www.985646.com-今日足彩-| www.da11.com-人人彩彩票-| www.437769.com-多赢彩票注册| www.125417.com-三d福彩专家预测| www.535399.com-六个号码是什么彩票| www.311444.com-三分彩是什么彩票| www.74nc.com-快三除三余数走势图| www.66124.com-快三破解辅助器| www.019762.com-彩票加盟咨询电话| www.097772.com-加微信玩快三| www.187488.com-彩票漏洞计算方法| www.250096.com-福彩3d中奖号| www.312519.com-彩票开奖信息公告| www.501717.com-彩票七彩星开奖走势| www.58ea.com-胜负彩18077预| www.650192.com-海南体彩4十1开奖| www.7111.in-彩93彩票下载| www.lf4.com-广西快三万能走势图| www.wx28.com-湖北竞彩快三查询| www.10ka.com-梦见买彩票中了小奖| www.8338.hk-优点彩票下载| www.072911.com-全民赢彩票下载| www.303997.com-下载甘肃快三| www.394062.com-创意色彩头像| www.00yv.com-福利彩票选4开奖| www.751247.com-巴土彩票-| www.817553.com-彩票和值表-| www.874946.com-天天竞彩彩票| www.928528.com-福彩3d出号规律| www.972410.com-彩铅画嘴巴-| 彩票驿站www.621361.com| www.gg25.com-体彩大乐透预测号码| www.tn54.com-快三随机选号| www.x20.cn-辽宁沈阳福彩中心| www.978914.com-体彩足球竞猜| www.dr3.com-快三跨度怎么看精确| www.np95.com-河北快三开奖结果图| www.616656.com-体彩3串1什么意思| www.674880.com-福彩归什么部门管辖| www.887192.com-快三投注模拟器| www.944054.com-上海福彩领奖时间| www.984114.com-彩之源下载-| www.cp3375.com-河南快三推荐号码| www.jy17.com-七星彩奖金规则表图| www.wr32.com-马来三分彩开奖时间| www.54se.com-512彩吧-| www.272512.com-江苏快三走势图批| www.964350.com-七星彩二等奖怎么看| www.dh40.com-七星彩几个号算中奖| www.871123.com-天天彩票投资赚钱| www.960295.com-酷彩吧是不是奖多多| 500彩票www.51515l.com| www.cd98.cc-黑彩赌博的案例| www.614515.com-光彩什么意思| www.681553.com-辽宁省级福彩中心| www.333467.com-新手买什么彩票| www.567319.com-竞彩篮球过关计算器| www.736712.com-浦东体育彩票中心| www.872336.com-贵州省体彩中心电话| www.56oc.com-k彩彩民福客服| www.774728.com-七星彩开奖号码往期| www.881038.com-黑彩平台代理加盟|