QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 选项卡/滑动门 > jQuery新闻列表tab切换布局代码

原创商用 jQuery新闻列表tab切换布局代码

jQuery简洁大气的新闻资讯列表tab布局,鼠标悬停tab标签滑动切换代码。
分享到微信朋友圈
X
[声明]该素材属于原创商用,未经允许请勿转载,内有版权说明,否则追究相应的法律责任。

使用方法:

1、head引入css文件

<link rel="stylesheet" type="text/css" href="css/style.css">

2、head引入js文件

<script src="js/jquery.min.js"></script>

3、body引入HTML代码

<div id="new_box">

	<div class="title_cn">
		<img src="images/tle_bt5.png" width="166" height="41">
	</div>
	
	<div class="new_con">
		<div class="newtel">
			<ul class="new_telst">
				<li class="">公司新闻</li>
				<li class="newon">行业新闻</li>
				<li class="">媒体报道</li>
				<p style="left: 166px;">
					<b></b>
				</p>
			</ul>
			<div class="clear">
			</div>
		</div>
		<div class="new-wrap">
			<!--案例1-->
			<div class="new_lst show" style="display: none;">
				<ul class="new_lst_cn">
					<li class="new_cnlf">
					<p class="newlf_img">
						<img src="images/new_img1.jpg" width="370" height="147">
					</p>
					<p class="newlf_tel">
						<a href="#" target="_blank"> 天下数据2018年端午节放假安排! </a>
					</p>
					<p class="newlf_tx">
						 根据《国务院办公厅关于2018年部分节假日安排的通知》精神,及我司实际情况,现将2018年端午节放假安排通知如下:
					</p>
					</li>
					<li class="new_cnrf">
					<div class="newrf_lst">
						<dl>
							<dd>
							<p class="new_rq">
								<span>13</span>2018-6
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 天下数据2018年端午节放假安排! </a>
								<span> 根据《国务院办公厅关于2018年部分节假日安排的通知》精神,及我司实际情况,</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>15</span>2018-5
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 记朗玥科技惠州两日行 </a>
								<span>时间总是在你忙碌中向前跑得飞快。恍然间2018年已至5月,当歇息一番,放空自己</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>23</span>2018-4
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 天下数据五一劳动节放假安排! </a>
								<span> 根据《国务院办公厅关于2018年部分节假日安排的通知》精神,及我司实际情况,</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>3</span>2018-4
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 天下数据泰国游记 </a>
								<span>一提到泰国,或许我们脑海中立刻冒出来词都是相同的,那大概就是人妖了。其实不然,</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>3</span>2018-4
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 天下数据2018年清明节放假通知安排 </a>
								<span>根据国家国务院法定节假日放假规定,结合公司实际情况。根据公司领导安排,现将20</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>1</span>2018-3
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 机智如你|天下数据邀您备战元宵节,这... </a>
								<span>明天是正月十五元宵节 ,在这个吉祥的日子里,
天下数据 提前祝所有客户朋
								</span>
							</p>
							</dd>
						</dl>
					</div>
					</li>
					<div class="clear">
					</div>
				</ul>
			</div>
			<!--案例2-->
			<div class="new_lst" style="display: block;">
				<ul class="new_lst_cn">
					<li class="new_cnlf">
					<p class="newlf_img">
						<img src="images/new_img2.jpg" width="370" height="147">
					</p>
					<p class="newlf_tel">
						<a href="#" target="_blank"> 天下数据:CDN加速技术的特点和优势 </a>
					</p>
					<p class="newlf_tx">
						现如今大众对互联网服务的要求越来越高,对于网站访问速度的快慢自然会更加在意。虽然带宽不断增加,但用户数量也在不断增加,受网站服务器的负荷和传输距离等因素的影响,响应速度依然需要得到重视。
					</p>
					</li>
					<li class="new_cnrf">
					<div class="newrf_lst">
						<dl>
							<dd>
							<p class="new_rq">
								<span>26</span>2018-7
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 天下数据:CDN加速技术的特点和优势 </a>
								<span>现如今大众对互联网服务的要求越来越高,对于网站访问速度的快慢自然会更加在意。虽</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>25</span>2018-7
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 美国服务器下载速度受那些因素影响? </a>
								<span> 美国服务器带宽比较大,对于软件下载或者在线视频观看时,下载的速度都会比较快,</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>24</span>2018-7
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 从腾讯云宕机看如何提高云服务器安全防... </a>
								<span>腾讯云于今日出现宕机现象,称监控到广州区域部分用户资源访问失败,控制台登录异常</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>23</span>2018-7
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 美国服务器可以做视频网站吗?有哪些优... </a>
								<span> 美国服务器可以做视频网站吗?由于距离的原因,对于中国市场来说,很多人都不会选</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>19</span>2018-7
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 视频网站服务器租用从哪些方面选择? </a>
								<span>随着网络宽带上的升级,网站也随着多方面性的发展,在网络中视频网站的数量也在呈直</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>18</span>2018-7
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 美国服务器适合建哪些企业网站? </a>
								<span>天下数据美国KT服务器冲量抄底特价低至350元/月</span>
							</p>
							</dd>
						</dl>
					</div>
					</li>
					<div class="clear">
					</div>
				</ul>
			</div>
			<!--案例3-->
			<div class="new_lst" style="display: none;">
				<ul class="new_lst_cn">
					<li class="new_cnlf">
					<p class="newlf_img">
						<img src="images/new_img3.jpg" width="370" height="147">
					</p>
					<p class="newlf_tel">
						<a href="#" target="_blank"> 直销认证 | 天下数据被授予“201... </a>
					</p>
					<p class="newlf_tx">
						 2018「第十一届」世界直销品牌节大会以“向新力 新需求/再出发”为主题,在武汉洲际酒店隆重举行。
					</p>
					</li>
					<li class="new_cnrf">
					<div class="newrf_lst">
						<dl>
							<dd>
							<p class="new_rq">
								<span>6</span>2018-7
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 直销认证 | 天下数据被授予“201... </a>
								<span> 2018「第十一届」世界直销品牌节大会以“向新力 新需求/再出发”为主题,在</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>6</span>2018-7
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 天下数据聊:直销企业面临新机遇和新挑... </a>
								<span>近年来,随着全球经济增速放缓,居民消费水平的提高,“互联网+”的突飞猛进、微商</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>3</span>2018-7
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 天下数据荣获“2018年度品牌信息化... </a>
								<span>恭喜天下数据在第十一届世界直销品牌节荣获“2018年度品牌信息化服务之星”的称</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>28</span>2018-6
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 第十一届世界直销品牌节,天下数据品牌... </a>
								<span>第十一届世界直销品牌节在武汉五星级酒店——洲际酒店宴会厅拉开了直销品牌节的节日</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>27</span>2018-6
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 天下数据受邀参加“2018世界直销品... </a>
								<span>  2018年6月27日,天下数据应邀出席第十一届(世界)中国直销品牌节。中国</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>26</span>2018-6
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 天下数据:世界杯看直播 不卡顿可以吗... </a>
								<span>全民直播年代,迎接来了四年一遇的火热世界杯。因为互联网的迅速崛起,以及全民直播</span>
							</p>
							</dd>
						</dl>
					</div>
					</li>
					<div class="clear"></div>
				</ul>
			</div>
		</div>
	</div>

</div>

<script type="text/javascript">           
$(document).ready(function(){
	//设计案例切换
	$('.new_telst li').mouseover(function(){
		var liindex = $('.new_telst li').index(this);
		$(this).addClass('newon').siblings().removeClass('newon');
		$('.new-wrap div.new_lst').eq(liindex).fadeIn(150).siblings('div.new_lst').hide();
		var liWidth = $('.new_telst li').width();
		$('.newtel .new_telst p').stop(false,true).animate({'left' : liindex * liWidth + 'px'},300);
	});
	
});
</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
彩01彩票 www.626879.com-福利彩票开售时间| www.486633.com-足彩对冲套利| www.799172.com-c3t彩票-| www.893501.com-乐彩网最新版| www.966236.com-亿彩网被骗-| www.lb5.cc-安徽快三彩票| www.tf74.com-彩票杀跨度技巧| www.40lz.com-天空资讯彩票| www.0626.live-福彩3d预测交流| www.587115.com-正规篮彩app| www.892876.com-休育彩票大乐透分析| www.964349.com-彩票怎么看才懂| www.cai9345.com七星彩近30期| www.994126.com-上海快三共有多少期| www.e15.biz-123好彩票网站| www.0566.xyz-琓彩人绝杀一码| www.11763.cc-江西快三购彩平台| www.91768.com-手机彩票缩水软件| www.68043.com-彩票3d秘密-| www.31244.com-互娱彩票下载| www.006304.com-九州彩票平台网址| www.8389.pw-台湾七星彩全年资料| www.53515.cc-网赌快三输了| www.67998.com-吉彩全部彩种| www.8370.cc-溢彩年华衣柜| www.49609.com-贵州福利彩票开奖| www.oi7.com-甘肃福彩快三01| www.38788.cc-大富豪彩票预测| www.964316.com-体彩61-| www.9329.online大马彩彩票马来西亚| www.018071.com-七星彩带坐标走势图| www.42lk.com-河内五分彩平台有吗| www.60bv.com-分分彩后三包胆稳赚| www.126641.com-体彩22选五走势图| www.230758.com-长城彩票app下载| www.308103.com-微信买彩票怎么兑奖| www.53473.com-口袋彩票-| www.45bz.com-排三杀号众彩网| www.25280.com-彩庫寶典ios| www.wz87.cc-海南七星彩头尾| www.120819.com-快三对子号组合表| www.41xz.com-彩票网站账户被冻结| www.3305.org-中彩吧2020下载| www.9203.vip-彩票站挣多钱| www.gx61.com-百盈快三的玩法| www.3900.cc-竞彩足球买法| www.158001.com-竞彩足球用什么软件| www.147214.com-彩票五星定位胆技巧| www.12386.cc-竞彩篮球比赛直播| www.30se.com-福利彩票賺的钱归谁| www.0152.vip-彩9彩票邀请码| www.896576.com-博彩套利团队| www.984220.com-惠州福利彩票| www.cl75.com-江苏褔彩-| www.vm12.com-彩票中奖的真实经历| www.373653.com-足球竞彩赛果开奖| www.286371.com-福彩3d大老人推荐| www.410782.com-体彩排列三下载| www.xy27.com-d9彩票登录平台| www.37zw.cc-下载七星彩或规律| www.092667.com-福建体彩中奖领取| www.818573.com-彩票双色球领奖地址| www.895971.com-福彩数据统计| www.963451.com-彩色水磨石地面报价| 天天赢彩票www.73736e.com| www.622575.com-快乐彩浙江-| www.708148.com-彩票漏洞刷钱教程| www.799696.com-彩金简单鉴别方法| www.868191.com-南国彩票论坛图归一| www.bw94.com-快三二同号最大遗漏| www.254733.com-重庆分分时时彩| www.037955.com-手机彩票组合软件| www.103894.com-港澳台超级中彩网| www.362587.com-彩票亏了-| www.551833.com-足彩360专家军长| www.652975.com-宝宝时时彩在线计划| www.802719.com-h广西体育彩票网| www.936550.com-体彩胜负彩开奖结果| www.cp0394.com-快三追号神器| www.22wx.cc-快三共有多少组号码| www.0535.loan-易中奖彩票被调| www.25867.com-聚彩彩票是什么| www.766722.com-hk香港百彩网站| www.320091.com-798彩票下载| www.62393.com-福彩软件真的假的| www.cd96.com-伯爵彩票登录网站| www.799226.com-天空彩票與你同行| www.977720.com-开彩票店利润| www.jr45.com-彩神1x-| www.15jl.com-彩树歌-| www.378112.com-彩虹6无人机参数| www.054565.com-360竞彩比分直播| www.315986.com-商业区彩票店| www.30yq.com-干个彩票站得多少钱| www.64637.com-竞彩代理怎么找客户| www.616005.com-关于卖彩票的小程序| www.979736.com-手机玩彩票软件| www.nr12.com-尊彩安全吗-| www.757573.com-福建体彩论坛2中1| www.23531.com-彩神争霸二-| www.647913.com-易彩分分彩是真是假| www.871841.com-q彩app真的吗| www.969466.com-酷乐彩是什么彩票| www.cp7211.com-快三人为控制| www.vh26.com-3d牛彩断组-| www.44lz.com-今日竞彩足球推分析| www.368931.com-彩神全能版破解| www.457057.com-鼓励彩民中奖的句子| www.540855.com-体彩大乐透中奖号| www.6099.cm-釉上彩茶具有毒吗| www.690553.com-可以购彩的app| www.uw95.com-贵州福利彩票投注| www.767235.com-竞彩足球分析推荐| www.896830.com-彩票中奖者的故事| www.974493.com-上期体彩中奖号码| www.py9.com-百宝彩湖北快三| www.uy92.com-人人娱乐彩票| www.15dc.com-腾讯时时彩官网下载| www.349338.com-大发彩票是什么意思| www.678102.com-北京快三导师微信号| www.760221.com-时时彩平台无法提款| www.847498.com-3d乐彩网三天计划| www.903546.com-星光彩票网站| www.963917.com-卖体彩引流-| 杏彩www.00840x.com| www.fp50.com-辽宁体彩11选5| www.uj86.com-3d彩宝网开机号| www.064782.com-彩票双色球预测号码| www.336819.com-江苏快三今天的结果| www.250898.com-豪彩手机版-| www.2609.live-彩乐购-| www.67vu.com-什么是彩色防滑路面| www.824468.com-花50万买彩票| www.503931.com-高倍彩票软件| www.646565.com-生肖彩票49选一| www.680172.com-彩票的真实性有多少| www.44mi.com-富利彩票官网下载| www.220555.com-福彩快三输了想回本| www.288635.com-好123彩票导航| www.678183.com-彩票销售结束时间| www.342333.com-百乐彩是正规平台吗| www.5qs.com-竞彩要交税吗| www.755438.com-炫乐彩票注册登录| www.840559.com-足彩胜平负概率表| www.17wz.com-苏州竞彩快3走势图| www.3vm.com-中国彩票公司创始人| www.62gd.com-下彩彩-| www.4093.me-荣誉国际彩票| www.208691.com-足彩让球什么意思| www.372881.com-2013体彩排列三| www.eq79.com-最新大发快三走势图| www.e93.top-中国福彩网3d开奖| www.0847.top-优彩环保ipo| www.971324.com-彩票分析基础pdf| www.ri5.com-广西快三精准计划网| www.597920.com-爱购彩官网-| www.775336.com-掌中彩网站-| www.864323.com-三地字谜总汇新彩网| www.948232.com-新粤彩网-| www.993652.com-足彩19044推荐| www.54mh.com-彩39软件下载| www.877971.com-牛人彩票软件| www.948157.com-千亿彩票平台怎么样| www.986400.com-彩票报纸金手指|