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天

知道了
时时乐上海开奖结果 www.397206.com-乐透彩票怎么下载| www.567095.com-彩虹和平鸽儿童画| www.651711.com-永利彩票邀请码| www.731838.com-彩色包装袋厂家| www.803066.com-合盈彩票网可信吗| www.883217.com-打彩赚钱-| www.409696.com-811彩票打法| www.8tw.cc-怎么买福利彩票两元| www.199.cc-669彩票下载| www.69792.com-易彩乐是不是假的| www.256005.com-e球彩助手官方下载| www.372982.com-16号彩票-| www.61216.cc-众购彩票网网址| www.233258.com-北京体彩官网首页| www.6339.cm-彩票排列五在线机选| www.770278.com-好彩4宝珠-| www.993507.com-体彩竞彩几种玩法| www.fs04.com-网上时时彩骗局揭秘| www.f94.net-体彩排三图迷总汇| www.326748.com-美国昨天彩票出奖| www.275957.com-福建体彩22选5| www.638631.com-手机快三软件下载| www.218899.com-快频彩票-| www.67955.cc-河内1分彩-| www.37683.cc-九万彩票客服| www.006046.com-m8彩票软件-| 亿彩彩票www.yi876.com| www.912493.com-快三人人-| www.cp1.net-极速快三开奖结果| www.rt60.com-体彩排列五玩法| www.350346.com-体彩湖北兑奖地址| www.881849.com-代打彩票-| www.983104.com-彩客竞彩下载| www.be20.com-喜乐彩票-| www.857943.com-动物总动员彩票| www.370290.com-福利彩票意义| www.770975.com-500彩票客服电话| www.879944.com-陕西福彩双色球开奖| 五星彩票www.5xca.com| www.538023.com-国彩信息一体机| www.187879.com-时时彩时间调整| www.650528.com-最流行的彩票| www.819193.com-彩票中奖之后上班| www.122205.com-演示彩票作弊视频| www.57295.cc-博彩王彩票分析预测| www.zg12.com-七乐彩杀号360| www.30zr.com-彩虹代刷网搭建教程| www.0931.cc-海南快三官方| www.411777.com-猫彩铅画图片大全| www.042955.com-彩票店开业的宣传语| www.519012.com-分分彩app计划| www.606657.com-长沙福利彩票申请| www.693902.com-电脑传统型彩票| www.779182.com-福彩会员积分卡| www.474015.com-彩仙-| www.441751.com-买彩票有限制吗| www.649200.com-博汇彩票平台| www.974057.com-福彩刮刮卡中奖图片| www.gf45.com-环球彩票大发快三| www.690727.com-牛蛙彩票免费料大全| www.810217.com-彩票怎么才算中奖| www.909632.com-福彩2鱼玩彩| www.983913.com-258彩票网app| www.bm04.com-买双色球彩票| www.ve23.com-易彩线路测试| www.sq46.com-今期彩票指南报纸| www.977079.com-河南结婚风俗彩礼| www.739581.com-苹果彩票aqq| www.326646.com-乐彩排三论坛| www.437999.com-安庆体育彩票店在哪| www.796396.com-博乐彩票骗局| www.887208.com-11选5购彩微信群| www.nz65.com-贵宾室彩票软件| www.865908.com-深圳熊猫彩票| www.947366.com-彩票诈骗怎么处理| 众发彩票www.669zf.com| www.660250.com-玩分分彩技巧| www.282098.com-正德体彩店-| www.055154.com-赌黑彩什么罪| www.633078.com-中国篮球彩票怎么买| www.477413.com-江苏快三手机版下载| www.qe18.com-好彩3怎么中奖| www.975261.com-捷豹彩票365网址| www.nx33.com-福利彩票字谜| www.7wc.com-南粤七星彩空白长条| www.962291.com-3d福彩马后炮| www.fq15.com-贵州福彩快三走势图| www.383364.com-今天晚上福彩开奖| www.098873.com-ig彩票平台官方网| www.531560.com-玩nba篮彩的网站| www.378219.com-万豪彩票助手手机版| www.727018.com-乐彩网彩票-| www.793667.com-彩票是合法赌博| www.860860.cc-60万一包的好彩| www.914556.com-破解彩票漏洞犯法吗| www.969296.com-福彩公益金管理| 大赢家彩票平台www.186357.com| www.397091.com-okoo彩票网-| www.576479.com-甘肃彩票店转让| www.739992.com-玩顶尖彩票犯法吗| www.811555.com-优的体育彩票| www.879722.com-快乐分分彩人工计划| www.949298.com-中彩那天教案| www.994602.com-安徽快三一定牛今天| www.bb13.cc-河北1快三开奖结果| www.32af.com-贵州多彩宝免费下载| www.be17.com-摇一摇机选彩票| www.237471.com-足球竞彩计算器| www.339566.com-爱彩乐是什么平台| www.563399.com-60彩票的网址| www.226998.com-湖南长沙快三| www.9444.top-体彩和值谜-| www.396098.com-星期天开什么彩票| www.263979.com-购彩大厅彩票合法吗| www.mv10.com-我要中彩app| www.6678.cc-排列3论坛双彩| www.002331.com-台北快三计划网址| www.685091.com-彩票打票员几天学会| www.525019.com-天下彩票49cc| www.874547.com-山西福彩结果| 七彩www.53900m.com| www.73rg.com-彩乐园官网-| www.385126.com-入侵彩票平台| www.265837.com-宁夏福利彩票| www.577863.com-重庆分分彩官网网址| www.172217.com-江西福彩快三规则| www.307864.com-体育彩票时时彩| www.8495.cn-福彩售票几点结束| www.yu74.com-甘肃体彩排五| www.96896.com-体彩福彩合并申请书| www.222673.com-大众彩票计划网| www.357361.com-离婚后中了彩票| www.618232.com-我要看体彩排列三| www.725028.com-福彩3d选号王评论| www.hj17.cc-彩8下载专区| www.87ib.com-永博国际网上彩票| www.283867.com-中国福利彩票种类| www.059758.com-3d福彩组三怎么玩| www.137608.com-彩赢娱乐平台| www.217642.com-竞彩网网址-| www.8905.cn-竞彩多久能兑奖| www.uz16.com-人彩票网-| www.539183.com-开彩票站怎么选位置| www.37936.cc-顶级彩票登陆| www.385687.com-体彩开什么号码今天| www.531206.com-制作彩票软件下载| www.697765.com-怎么打开彩票大赢家| www.972640.com-有关风景的彩铅画| www.zz2.com-河南快三开将结果| www.p04.space-彩票双色球游戏规则| www.753297.com-中华彩吧合法吗| www.832709.com-七彩背景图-| www.896644.com-篮球博彩规则| www.961493.com-网络购彩2018| 亚洲彩www.68568m.com| www.ry97.com-如何戒掉彩票瘾| www.7070.cx-豫彩通官方下载| www.45673.cc-大乐购彩票怎么玩法| www.128945.com-中国福彩三d开奖号| www.210722.com-福利彩8平台| www.309779.com-山东省体彩快乐扑克| www.116313.com-梦到彩虹是什么意思| www.193303.com-网上买彩票怎么买| www.253779.com-青海省快三-|