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天

知道了
亚洲28 www.cp1107.com-安徽快三全天计划| www.d17.net-彩中彩骗局-| www.46ee.com-pc881彩讯-| www.915.hk-七星彩四定位| www.4966.cc-598彩票网官网| www.56811.cc-欢乐彩骗局-| www.102062.com-在哪里买篮球彩| www.796442.com-彩票有没有稳赢的| www.23156.cc-彩票江苏快三猜大小| www.632822.com-足彩一注2元赢多少| www.765857.com-淘宝彩票淘宝网| www.jp96.com-qq快三群-| www.31nd.com-湖南快乐十分彩开奖| www.3396.cc-k73彩票app-| www.002032.com-各种釉彩大瓶的感受| www.3852.xyz-竟彩足球一周对阵表| www.04004.com-育彩福利彩票开奖| www.63606.com-竞彩单场推荐总绘| www.63qw.com-68彩票网是什么| www.446229.com-手机版苹果彩票网| www.9978.in-倍投快三能赚钱吗| www.69220.com-苹果彩票网站安全吗| www.034971.com-799彩票-| www.141426.com-2020彩票能信吗| www.13vo.com-快三每天提现额度| www.519.com-彩托有那些骗术| www.388411.com-彩票骰子开大小双单| www.589370.com-七星彩双重多少组| www.184145.com-彩票快三骗局| www.378598.com-北京28幸运彩| www.579852.com-进球彩app怎么样| www.690930.com-大发一分钟快三技巧| www.784520.com-2018互联网售彩| www.874232.com-博彩源码-| www.958354.com-鸿运五分彩开奖查询| 天下彩www.422689.com| www.ul39.com-体彩福彩合并多少钱| www.38bb.com-网上教买彩票赚钱的| www.8185.loan-七星彩开奖综合版| www.137075.com-全民彩迅-| www.314924.com-双色球彩票规则| www.02ey.com-廊坊福彩中心在哪| www.437599.com-春秋彩票计划图| www.193224.com-大马彩票开成绩| www.407520.com-zgzcw彩网-| www.231498.com-中彩威视软件下载| 彩票大家乐www.21202g.com| www.956087.com-玩彩票的心态| www.ne74.com-购彩大厅下载手机版| www.128471.com-福彩网江苏快三| www.501127.com-员工年终奖发彩票| www.579563.com-3d王朝彩票论坛| www.659541.com-2001足彩第一期| www.731022.com-送彩金app-| www.815193.com-发财网彩票下载| www.893387.com-乐彩网代理邀请码| www.970787.com-怎样破解彩票| www.cp5155.com-上海快三玩法介绍| www.2135.cn-牛彩3d9-| www.019646.com-福彩迷是什么| www.604531.com-彩票模拟摇奖软件| www.932747.com-那个软件可以买快三| 东方国际www.055973.com| www.ot56.com-彩票10个数字规律| www.711351.com-网络彩票提现| www.8719.top-吉林福彩快三玩法| www.883815.com-博瑞彩票平台可靠吗| www.987132.com-海南东方快三走势图| www.fg13.com-彩票送彩金19| www.zb59.com-彩票会作假吗| www.91em.com-好彩频道回看| www.2698.me-下载彩宝app| www.20404.com-福彩网赚-| www.376660.com-福彩睌秋乙种和值谜| www.30402.com-七星彩是哪里的彩票| www.506.cc-福星彩图库1| www.js71.cc-快8彩票开奖结果| www.567314.com-江苏福彩七乐彩规则| www.313447.com-彩神8网站-| www.81551.cc-柬埔寨博彩招聘骗局| www.059253.com-手机玩k彩犯法吗| www.131006.com-我中啦彩票-| www.9293.top-马来西亚博彩公司| www.52458.com-可以买足彩的app| www.594370.com-七彩汇游戏下载| www.806863.com-香港热门平台彩票| www.903768.com-万豪福彩下载| www.454007.com-迪斯尼彩乐园手机版| www.612995.com-彩票每日首存平台| www.329059.com-中国福利彩快乐十分| www.25861.cc-足球彩票让球胜平负| www.51327.com-彩票双色球生日选号| www.28119.cc-体彩属于哪个部门| www.871053.com-关于福利彩票的书| www.4819.top-下载万众彩-| www.995952.com-足彩大1-| www.og83.com-快三遗漏号-| www.806388.com-体彩彩票应用| www.221371.com-博牛彩票真的假的| www.654028.com-体育彩票电话| www.610386.com-福彩8app是什么| www.794811.com-足彩算赌博么| www.976747.com-中国彩礼最高的省| www.mu69.com-福彩快3网上购买| www.800936.com-彩票中奖了领奖时间| www.638794.com-体育彩票竞彩上海| www.777337.cc-彩票工作工资高吗| www.994010.com-彩票足球竞彩怎么玩| www.jr88.com-关于王者彩票被骗| www.190712.com-快三赢钱的技巧方法| www.747492.com-七星彩图片大全| www.831025.com-深圳福彩开奖查询| www.907864.com-合肥体彩店转让价格| www.970882.com-彩票有哪几种类型| 大赢家彩票平台www.710230.com| www.nz94.com-竞彩倍投计划表格| www.3da.com-仲博是黑彩吗可靠吗| www.946.live-彩票选哪个数字| 惠民彩票www.18kpl.com| www.62by.com-彩票100期-| www.996644.com-爱乐彩专业版| www.jb07.com-福彩中奖细则| www.18475.com-彩票自动选号器| www.612580.com-体彩跨度7是什么| www.847118.com-竞彩盈亏的区别| www.900776.com-福彩3d银海布衣图| www.885615.com-东莞利彩-| www.959483.com-新盈彩官网-| 万利www.32123r.com| www.559777.com-冀彩宝客户端下载| www.652131.com-买澳门彩票违法吗| www.966111.com-一定牛快三遗漏号码| www.bj56.com-彩票大小单双软件| www.322044.com-亚博科技阿里彩票| www.444518.com-网上专门找人玩彩票| www.177672.com-江苏快三计划网页| www.133845.com-粤淘彩票怎么注册| www.96636.cc-体彩是事业单位吗| www.948924.com-彩票内部透码香港版| www.990957.com-一分钟一期彩票骗人| www.qp5.com-山东体彩快乐扑克3| www.60553.cc-爱彩乐陕西快乐十分| 大赢家彩票www.394611.com| www.780781.com-3d福彩最新预测| www.607250.com-福彩3d字i迷总汇| www.717484.com-用彩铅怎么画桃花树| www.817915.com-一定牛彩票电话投注| www.940076.com-休彩排列五走势图| 多宝彩票www.75538a.com| www.od61.com-追快三冷号害死人| www.08582.com-139彩app下载| www.56582.cc-邯郸体彩-| www.023510.com-体彩福彩速查表图| www.143533.com-玩长城彩票挣钱吗| www.01ja.com-发彩网优惠券领取| www.3652.xyz-甘肃快三结果| www.429766.com-靠谱的足彩-| www.b12.space-500竞彩网-| www.21rc.com-人民网澳客彩票下载| www.534331.com-有前景的体彩官网| 中彩网www.61233h.com| 500彩票www.50024j.com| www.688.red-助赢时时彩计划网页| www.5132.cn-彩票截止到几点|