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.628995.cc-福利彩票代打| www.132457.com-河南濮阳结婚彩礼| www.781817.com-黑彩怎么能赢| www.946864.com-上海彩钢板生产厂家| www.cv34.com-彩票系统app开发| www.63yt.com-彩城优里菜怎么样| www.28632.cc-股市与彩票-| www.100720.com-时时彩定位胆码公式| www.18177.com-足球竞彩模拟投注| www.22985.cc-天天赢彩票官网| www.821100.com-福彩3d大兵图| www.501155.com-最近福利彩票站西平| 双彩网www.651012.com| www.783665.com-彩票体彩7星彩| www.886850.com-彩61靠谱吗-| www.65ry.com-竞彩十四场-| www.0095.loan-福建体彩现场直播室| www.123992.com-燕赵福彩排列期开奖| www.262274.com-江苏快三数据遗漏| www.354099.com-全球奖金最高的彩票| www.439473.com-彩票机出租或转让| www.722109.com-彩票走式图-| www.5678.gg-世界彩票专家排名| www.31562.cc-风凰竞彩-| www.8558.shop-福彩中心主任电话| www.951126.com-天天彩票网下载| www.05336.com-彩金换黄金怎么换| www.062630.com-鸿运彩票是不是真的| www.012463.com-七星彩2275期测| www.518.tv-保定体彩中奖号码| www.6699.biz-中国足彩网5o0| www.9325.online新加坡有彩票吗| www.ma09.com-快三可以复式吗| www.01vh.com-鼎吉国际彩票| www.61xe.com-彩38的网站多少| www.63wn.com-福彩漏洞-| www.0120.biz-c168彩票app| www.6346.cc-福彩6等奖多少钱| www.19212.com-体彩足球竞彩网首页| www.y93.club-新宝5彩票下载安装| www.539036.com-众乐彩是什么| www.603455.com-创富彩票怎么玩| www.739692.com-彩票计划苹果| www.825697.com-快三长牌短牌| www.898899.cc-博彩送彩金app| www.972948.com-彩虹易支付正版授权| www.io1.com-内蒙古一定牛彩票| www.oe63.com-彩票中奖查询结果| www.104076.com-马来西亚大万彩票| www.356.cm-靠谱的彩票平台国外| www.704266.com-大唐平台彩票登陆| www.791607.com-福利彩票选4| www.871160.com-七乐彩走势图综合版| www.954719.com-排三走势图彩宝网| 彩票坊www.022q.cc| www.971109.com-中国彩票有几种玩法| www.130456.com-黑马团队时时彩| www.292056.com-福利彩-| www.400278.com-海南七星彩梦册图| www.4096.cc-珐琅彩瓷器的价值| www.00852.cc-重庆福彩自助购票| www.070842.com-人人人彩票网| www.152528.com-七星彩缩水-| www.gz.com-湖北福利彩票快3| www.h89.cn-鸿瑞彩票合买是托吗| www.53do.com-彩票行家免费资料| www.85221.cc-买彩票怎样中五百万| www.055518.com-好彩vip手机下载| www.134911.com-体彩江苏7位数玩法| 天天中彩票www.969751.com| www.pd41.com-快三豹子通多少钱| www.00053.com-汇力彩色印刷包装| www.2895.com-中国福彩网幸运彩图| www.8031.vip-十字彩网址多少| www.22730.com-快三破解器下载苹果| www.806104.com-众彩网双色球论坛| www.072.org-南粵风彩36选7| www.397778.com-彩民在线直播高清| www.826719.com-312彩票app-| www.936235.cc-五星彩票是真的假的| 双龙娱乐www.slyl4.com| www.fd19.com-快三人工计划手机版| www.b06.com-什么是好彩票双色球| www.59ii.com-四川省体彩中心领导| www.3902.cc-七星彩规律图高手| www.25326.cc-二四六报彩神童论坛| www.79753.com-宁夏银川体彩中心| www.090756.com-go彩票官网-| www.173888.cc-福建快三中奖号码表| www.98pz.cc-www.86彩票-| www.9652.cc-福利彩票两块钱一注| www.71775.cc-辽宁真版3d彩涂| www.079124.com-七乐彩胆拖中奖表| www.154654.com-网易彩票怎么赚钱| www.254805.com-好彩堂论坛-| www.6jw.com-彩票开奖算法| www.010204.com-网上带你玩彩票的人| www.123406.cc-彩票网投领导者| www.120803.com-重庆时彩胆拖玩法| www.206499.com-亿彩堂快三app| www.286845.com-快三带线走势图| www.399969.com-单县体彩在哪里买| www.524086.com-私彩代理怎么定罪| www.093995.com-高频彩害人-| www.180079.com-福彩快三真的很坑人| www.296327.com-即时开彩新版| www.385156.com-七星彩频道预测| www.516287.com-什么软件可以买体彩| www.8050.in-儿童创意森林水彩画| www.ij52.com-九州彩票安卓版| www.21yd.com-福彩造假-| www.4872.xyz-彩票怎么才容易中奖| www.33770.cc-河北福彩快3概率| www.002209.com-体彩竞足-| www.189564.com-河北快三平台下载| www.295235.com-快3湖北福彩快三| www.397811.com-七星彩前期开什么奖| www.551278.com-彩票走势图下载大全| www.657291.com-福彩大厅游戏机| www.ln88.cc-台北快三-| www.14oe.com-宁国彩票中奖| www.27211.cc-新2亦彩票论坛| www.669874.com-什么彩票4位数| www.02qr.com-出现彩虹的寓意| 中华彩票www.897957.com| www.540833.com-爱购彩登录-| www.951207.com-金豆彩票下载| www.384178.com-中国福利彩票贪污案| www.52989.cc-福彩三d字谜今天| www.5385.pw-初买彩票的方法| www.86629.cc-衡阳福利彩票招聘| www.069578.com-鑫彩网app下载| www.157425.com-网上购彩软件可靠吗| www.279381.com-分分彩软件大全| www.6610.top-彩票中五百万难吗| www.82499.com-体彩杀号定胆码预测| www.100832.com-中国福彩双色球下载| www.130427.com-如何下载彩票走势图| www.862520.com-七星彩票开奖号| www.37ry.com-那款七星彩软件好| www.731491.com-什么是彩票刷水| www.935969.com-福彩电话客服电话| www.04oa.com-彩铅画的基本技法| www.850854.com-足彩胜负彩复式表| www.92na.com-竞彩二串一计划| www.02or.com-看见彩虹寓意| www.215356.com-瑞彩网合法吗| www.457533.com-买彩票搞笑说说| www.906133.com-足球竞彩比分结果| www.916556.com-中国足彩竞猜网| 赢彩吧www.c9667.com| www.b26.net-103彩票下载| www.jc55.com-河北快三奖金对照表| www.222258.com-所有的彩票网站大全| www.360715.com-合创彩票平台| www.602102.com-彩票可以伪造吗| www.56136.cc-吹吹七星彩高手论坛| www.097516.com-彩票公益金资助学生| 500彩票www.549377.com| www.2299.mobi-好彩娱乐门户网站| www.677829.com-华彩赢家能不能做| www.637030.com-红彩网官方首页| www.35868.com-头彩票手机版下载| www.094677.com-3d中国彩吧蓝仙子|