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.590065.com-福彩快3时间| www.730365.com-旧版彩神争争霸1| www.816615.com-时时彩五码遗漏| www.897568.com-足彩暂定赛程| www.970314.com-这期七彩奖结果| 乐发彩票www.336779.com| www.jk99.cc-腾讯分分彩稳賺| www.b11.space-天天分分彩官网| www.38fs.com-七星乐快三-| www.5436.xyz-足彩竞彩赛果查询| www.12400.com-竟彩分析-| www.53583.cc-福彩刮刮乐技巧规律| www.96009.com-县级体育彩票归谁管| www.062133.com-福彩三d天庚图| www.312568.com-福彩三d的走势图| www.388544.com-空军迷彩图片| www.551633.com-网络彩票客服| www.636367.com-彩虹电影直播源论坛| www.740741.cc-港股中的博彩股| www.808129.com-网络黑彩举报网站| www.875928.com-研究彩票走势有用吗| www.975804.com-环彩网app客服| www.hl6.com-快三怎么判断龙| www.rf93.com-彩6苹果下载安装| www.40kd.com-重庆时时彩注册代理| www.1233.net-重庆彩全天计划稳定| www.9228.cc-中国体育彩票看开奖| www.59197.cc-瑞彩祥云抢红包开挂| www.029955.com-福彩刮刮乐在线兑奖| www.166807.com-快三助手app| www.283050.com-7星彩玩法介绍图片| www.380220.com-七乐彩号码预测专家| www.522470.com-乐我时时彩计划网| www.655009.com-福星七星彩软件| www.767788.com-全球彩票网站哪个好| www.866810.com-2345彩票走势图| www.940469.com-七乐彩几个有奖| 开心彩票www.ck1178.com| www.fv49.com-福彩快三的规律| www.b29.hk-炫彩彩票是正规的吗| www.47ni.com-9968彩票手机版| www.112944.com-快3赌彩票家破人亡| www.200993.com-快彩王是骗局揭秘| www.285433.com-能跳快三的歌曲| www.513446.com-三分钟时时彩规律| www.649696.com-彩慱888-| www.775083.com-29日吉林快三分析| www.873906.com-江苏快三个位玩法| www.965914.com-幽默的买彩票的说说| www.cp3380.com-甘肃快三彩经网| www.oq74.com-众网彩票手机下载| www.03oe.com-福彩3d五码遗漏| www.76vb.com-彩票开彩票开奖| www.2167.xyz-七彩野山鸡养殖技术| www.8406.vip-江苏快三推荐什么| www.104063.com-最贵的好彩香烟图片| www.201047.com-808加急彩版| www.283926.com-什么彩票是2位数| www.492382.com-乐彩客彩票可信吗| www.571972.com-甘肃快三速查表| www.654800.com-时时彩号码复式器| www.791081.com-福彩2018151| www.871451.com-易彩彩民登陆| www.976401.com-河南人彩礼-| www.ae42.com-手机彩票网zucp| www.tw99.com-上海快3爱乐彩| www.09kg.com-⑧号彩票论坛马会开| www.0715.date-万博彩票二维码| www.22265.com-13e彩-| www.73277.com-电视剧《五彩戏娃》| www.051160.com-打高频彩有赢的吗| www.143933.com-彩运网是黑网吗| www.222630.com-彩票平台赚返点| www.300057.cc-吉林快三计划稳定版| www.525362.com-重庆时时彩官方停开| www.639646.com-竞彩网点申请| www.735155.com-福彩快三线上投注| www.860765.com-内蒙快三推荐号| www.927636.com-江苏省体育彩中心| www.987388.com-七星彩怎么手机投注| www.cp0303.com-河北快三助手| www.lu35.com-广东好彩3开奖号码| www.i66.xyz-彩名堂计划-| www.42iu.com-足彩竞彩开奖时间表| www.519.com-彩托有那些骗术| www.4366.top-568专业彩票平台| www.9953.xyz-竞彩篮球胜分差技巧| www.044177.com-福彩正版真精华布衣| www.142118.com-d8彩票-| www.217619.com-博彩漏洞赚钱违法吗| www.287869.com-华夏彩票官网论坛| www.623929.com-体彩排列三条件| www.720827.com-2v免费彩票一| www.799842.com-万达彩票官方网站| www.873137.com-欠债突然中彩票| www.nw.com-中国竞彩网比分直播| www.nu36.com-快三是赌博还是彩票| www.1qo.com-福彩三d图迷第三版| www.55vj.com-大乐透彩之店投注| www.0903.cn-福彩3d追号怎么样| www.9394.biz-高频彩种服务好| www.48163.com-网上打彩票-| www.88739.com-万豪彩票-| www.040043.com-玩彩网首页-| www.159121.com-头奖彩票app| www.241169.com-北京快三第一牛| www.311458.com-彩票神赞计划| www.378787.com-优乐彩7697下载| www.523836.com-体彩五位数开奖号码| www.665287.com-保定福彩电话投注| www.751497.com-新浪彩票任九| www.873942.com-双色球玩法彩票| www.951318.com-足彩直播500| www.990234.cc-湖北省快三预测| www.cp577.cc-快三破解器下载| www.kj57.cc-快三倍投计划| www.zp87.com-体彩猜胜负规则| www.60ay.com-竟彩足球比分直播| www.658.la-亿元彩票网是黑彩吗| www.5475.vip-彩虹世界下载网址| www.9824.cn-彩票开奖査询| www.126671.com-微信上可以买彩票吗| www.352565.com-福建福彩网开奖结果| www.450433.com-大庄家彩票骗人的吗| www.540030.com-儿童彩铅画作品图片| www.678784.com-足彩购买2019| www.757842.com-伍佰万彩票-| www.857292.com-彩之源怎么进去| www.972200.com-印尼五分彩开奖结果| www.ck23.com-有一分快三的彩票| www.sb01.com-红牛彩票网站真假| www.08xm.com-彩票不会中奖| www.73ji.com-体彩5d中奖号码| www.1549.net-福彩3d精胆天下a| www.8148.top-双色球彩票站开奖| www.32539.cc-快三有本金确实挣钱| www.81681.com-快三豹子通选多少钱| www.024752.com-赣州体彩中心地址| www.111216.com-御彩轩app收费| www.170417.com-彩神ii-| www.456844.com-华人娱彩-| www.563937.com-cc彩球靠谱吗| www.670692.com-黑彩网3d高手论坛| www.760332.com-西蔵快三开奖| www.872990.com-栋栋彩票-| www.954978.com-动物彩票开奖走势图| 好彩在线www.hczx3.com| www.ar87.com-福彩精彩十分规则| www.qp83.com-pc彩票是什么| www.10ls.com-彩票摇奖作假视频| www.0101.la-含有彩字的网名| www.6679.org-大发快三规律破解图| www.13404.com-19043期胜负彩| www.51066.cc-淘宝彩票淘宝网| www.89527.com-易彩票手机版下载| www.037955.com-手机彩票组合软件| www.654127.com-聚聚彩下载-| www.758750.com-彩93彩票靠谱吗| www.854161.com-中国时时彩票| www.912523.com-网上买彩票输数十万| www.968593.com-优乐彩提现问题| www.gu00.com-梦想彩票主页| www.vk01.com-山东体育彩票| www.73.cm-阿莲卡七彩鱼品种|