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.a13.cn-彩票破解计算| www.71xk.com-彩票走势图如何看| www.1190.tv-七天彩合法吗| www.8116.cn-红牛快三彩票| www.551905.com-足彩金手指日报| www.644113.com-杭州时时彩开彩结果| www.750003.com-金牛彩票下载| www.824770.com-彩名堂免费计划软件| www.899738.com-网上申请福利彩票站| www.978534.com-易旺彩票登录| www.yz.com-彩票大小规律| www.pe56.com-河北快三怎么玩挣钱| www.9xr.com-网上哪里买体育彩票| www.98pb.com-购买黑彩什么罪| www.3539.xyz-田野七乐彩预测| www.9484.xyz-彩吧怪字神帖会员版| www.333655.com-玩彩票wcpcc| www.441100.cc-炫彩图片带字| www.776814.com-江苏快三号码走势| www.867559.com-湛江南国彩票| www.945551.com-彩九c9com下| 亚投彩票www.ya939.com| www.dn33.com-有买彩票的老师吗| www.va06.com-钢炮福彩-| www.311967.com-甘肃省体彩兑奖中心| www.412354.com-广元做彩钢围挡定做| www.539024.com-众乐彩体现多久到账| www.675356.com-新浪彩药网-| www.073520.com-江苏彩票七位数开奖| www.148682.com-皇都彩票怎么玩法| www.254262.com-湖北快三最多连几期| www.319513.com-中国竞彩网比分直墦| www.381037.com-七乐彩开奖日期查询| www.474599.com-手机买广西福利彩票| www.552298.com-彩票三b字谜| www.cai0234.com彩票快三是什么意思| www.n07.org-吉林快三庄家会输么| www.291.tv-环球彩票平台登陆| www.7621.loan-新浪爱彩票可靠吗| www.6850.com-乐米彩票中了| www.15190.com-浙江体彩网下载软件| www.52844.com-买彩票赌钱输了| www.407739.com-新大陆重庆时彩计划| www.333165.com-神彩网首页-| www.658631.com-七星彩当前遗漏| www.842929.com-福彩哪年起售| www.07pi.com-动漫古风彩铅画| www.6683.top-万彩吧3d预测| www.85948.com-江阴铝卷彩涂厂| www.198409.com-传统彩票网站| www.8816.me-彩票白菜贴吧| www.331394.com-天天彩票软件安全吗| www.497167.com-家彩网胆码预测3d| www.3888.com-易购彩票网-| www.611331.com-今天彩票预测号| www.311771.com-河南快三害死人了| www.494990.com-怎么做个博彩| www.610772.com-四川彩票大奖| www.730560.com-体彩预测专家预测| www.957218.com-2044彩票网-| www.ed95.com-彩神邀请码最新| www.586718.com-送彩金平台客服| www.665948.com-航天彩虹最新消息| www.976740.com-彩礼排行-| www.696783.com-竞彩网足-| www.11yg.com-福彩时时采彩| www.6485.cm-七乐彩8中4加1| www.363912.com-廊坊福彩中心在哪| www.388.pw-易赢彩票会不会跑路| www.260661.com-福彩双色球怎样兑奖| www.359782.com-七星彩复式投注规则| www.4la.cc-国外彩票中大奖号码| www.111635.com-加拿大三分彩正规吗| www.2571.pw-779彩票安卓下载| www.254436.com-青蛙彩票开奖结果| www.767916.com-新淘彩网-| www.951895.com-足彩中奖5800万| www.rz3.cc-期期中必中分分彩| www.65nx.com-浙江福彩app| www.mu57.com-天天中彩彩票下载| www.9997.vip-福彩和体彩刮刮乐| www.145977.com-728彩票检测路线| www.134277.com-好彩三十斤-| www.nf88.cc-甘肃快三计划| www.772889.com-新世纪体育彩票指南| www.960176.com-泰安彩票-| www.b43.top-上饶市福彩发行中心| www.679281.com-彩678官网-| www.582350.com-现代彩票下载| www.905129.com-网络彩票是真是假| www.251444.com-2020彩票下载| www.63438.com-365凤凰彩票| www.526851.com-博盈彩票平台安全吗| www.848395.com-c38彩票领导者| www.019671.com-福彩网站下载| www.375516.com-南国体彩4十1图规| www.ym32.com-生肖彩票-| www.87sj.com-大地彩票黑钱| www.5287.vip-七星彩19年43开| www.35025.com-福彩三d摇奖机| www.025502.com-2018世界杯彩票| www.188677.com-彩票屠龙是啥意思| www.396722.com-云上贵州多彩宝| www.641852.com-双色球彩票是多宽| www.286116.com-安徽快三专家推荐| www.556481.com-永利彩票会员登录| www.714342.com-中彩网福彩3d跨度| www.861932.com-体育彩票店的图片| www.995601.com-8k彩票易彩快3| www.379715.com-夫妻俩幻想中彩票| www.ir76.com-68彩-| www.079081.com-北京快三线路图| www.226202.com-福彩快三怎么样| www.qh03.com-黄好彩什么味道| www.666215.com-500百姓彩票网| www.495554.cc-海南南国彩票软件| www.752803.com-福利彩票破解| www.1164.in-赤打一体彩术语| www.12285.cc-鸿博彩票-| www.005650.com-酷彩-| www.229638.com-093彩票注册| www.493365.com-福彩网最新邀请码| www.jk93.com-刷彩是什么-| www.3810.cm-体育彩票足球竞猜| www.695926.com-竞彩足球串关计算表| www.294023.com-福彩十选五中奖规则| www.774274.com-重庆十字彩走势图| www.618529.com-新浪足彩app下载| www.363120.com-3d字谜解释新彩网| www.506177.com-彩27彩票-| www.602051.com-3亿彩票中奖号码| www.701700.com-足彩竞彩胜平负玩法| www.802338.com-吉林市彩票中奖| www.896844.com-彩票赚钱软件下载| www.984752.com-中国竟彩票网计算器| www.664847.com-百福彩软件下载| www.751519.com-掌优彩票合法吗| www.820778.com-彩色砼路面价格| www.917113.com-彩客网触屏版胜平负| www.980399.com-59彩票官方网| www.cp710.com-快三哪些省份是真的| www.qw51.com-香港分分彩计划软件| www.32nu.com-用手机买张彩票| www.2874.cc-昨天晚上彩票开奖| www.9505.top-中国彩票分类| www.62626.cc-竞彩足球单场预测| www.038017.com-恒彩手机客户端下载| www.190970.com-河北快三号码走势图| www.400964.com-开心彩票正规| www.729236.com-北京快三末班车几点| www.884561.com-乐彩网开奖公告| www.982984.com-致享7彩福-| www.1qf.cc-梁宏达彩票评论| www.239.la-三彩丽雪没有官网吗| www.kt10.com-彩票分析师软件| www.121742.com-中港彩票网址| www.8844.loan-彩票服务-| www.074499.com-金彩100是传销吗| www.258443.com-足彩19042-| www.619657.com-彩票对冲打水| www.984713.com-梅花易数测彩票| www.057173.com-dj彩票平台网址| www.221771.com-彩票改单技术截图| www.480019.com-七星彩计算法|