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.51xc.com-彩鹰喷绘机官方网站| www.155960.com-好彩客234-| www.310313.com-足球彩票什么app| www.990103.com-多彩网平台-| www.ee31.com-福建福彩网走势图| www.553257.com-53彩票-| www.327926.com-宁夏福彩兑奖中心| www.4178.org-口袋彩票下载安装| www.859543.com-内蒙古体彩11选五| www.55556.cc-七星彩号码中奖查询| www.6487.cn-下载一定牛体育彩票| www.063022.com-彩票怎么开投注站| www.94nz.com-彩票机使用方法| www.5368.xyz-体彩足彩几点截止| www.83af.com-和彩云尊享版| www.009513.com-235彩票官网下载| www.964460.com-足彩现场直播比赛| www.xl81.com-派彩网专家推荐| www.588919.com-彩票在线平台登录| www.99353.cc-辽宁12选5爱彩乐| www.jo46.com-刷彩骗局-| www.16199.com-网络彩票超稳计划| www.606679.com-足彩为什么停售| www.726211.com-大发彩票登录地址| www.885981.com-网购体育彩票app| www.cpw| www.514958.com-够力七星彩画板下载| 博友彩www.371t.cc| www.571852.com-好彩双爆怎么样| www.609267.com-开奖派彩助手| www.968047.com-福彩领导犯的什么罪| www.th41.com-快三全天稳定计划| www.47520.com-体育彩票排三开机号| www.76uw.com-手机凤凰彩票| www.5784.vip-欧洲杯彩票-| www.604809.com-掌中宝彩票-| www.112370.com-邀请码送彩金| www.271342.com-庆典彩烟价格| www.415768.com-七彩阳光视频下载| www.605567.com-家彩3d开奖网| www.669528.com-海南抓获私彩头目| www.746211.com-大福彩票网址| www.400206.com-福彩3d周六走势图| www.579446.com-易购彩票app下载| www.69562.com-99彩票安全吗| www.465755.com-算命测试彩票| www.731471.com-福彩三地黑圣手字迷| www.3565.xyz-彩世界官网下载| www.71333.com-安徽省福彩一定牛| www.127636.com-彩虹授权站源码| www.246473.com-私人彩票平台怎么开| www.813552.com-福彩41期开奖结果| www.393998.com-看一下昨天福彩| www.kp12.cc-快三平台首页| www.570130.com-七彩视界最新版| www.577.cm-360足球竞彩投注| www.11938.cc-彩神帝-| www.204524.com-江西体育彩票官网| www.037128.com-彩名堂计划好用不| www.147169.com-哪个购彩平台最大| www.705037.com-安徽快三爱乐彩| www.1314.link-天天乐彩是骗局吗| www.661566.cc-福彩十二生肖图片| www.964367.com-306体彩下载| www.cai3811.com安徽快三遗漏| www.ls89.com-群计划买彩票| www.k36.me-吉林快三微信群正规| www.yc07.com-派彩电子走势图免费| www.81fd.com-冮苏体彩十一选五| www.570567.com-好彩五分快3| www.702241.com-快三提前看开奖码报| E彩堂www.43818k.com| www.981272.com-一分快三和值计划| www.as33.com-彩票走势怎么看规律| www.xd94.com-福彩三d报喜和值谜| www.787955.com-幸运彩官方下载| www.83em.com-拉萨彩票中心| www.870132.com-天天爱彩票官网下载| www.937095.com-五彩福彩票-| 金冠彩票www.c4523.com| www.927647.com-世界杯彩票在体彩买| www.917.cc-福彩申请条件最新| www.982182.com-3d字谜总汇新彩网| www.965912.com-买彩票的心情说说| www.cp3577.com-快三怎样追豹子| www.w00.biz-3d彩民乐钱途| www.92in.com-买彩票投注-| www.77px.com-五行彩票预测最准的| www.2114.vip-福彩双色球福票| www.kx21.com-大发快三投注软件| www.116698.com-体育彩票投资技巧| www.279234.com-集锦福彩快三走势图| www.642451.com-重庆时时彩宝典下载| www.118871.com-彩神8ios下载| www.cai1234.cc-北京快三助手| www.027592.com-易彩堂彩票是真的吗| www.700611.com-快三是人为控制| www.99151.com-玩时时彩为什么输多| www.873593.com-真福彩早早报| www.498891.com-澳洲快三-| www.330908.com-大奖彩票网址是哪一| www.0050.wang-给几组彩票号码| www.545861.com-福彩三d试机号破解| www.318345.com-高频彩调整-| www.413796.com-合肥福彩十个转让| www.507727.com-中兴彩票官网首页| www.657926.com-陕西百宝彩快乐十分| www.757088.com-彩讯pc28-| www.846389.com-李永志彩票案视频| www.932901.com-118彩票安卓| www.29lw.com-景彩慧-| www.71803.com-银海布衣彩票工作室| www.601681.com-南阳彩票大奖得主| www.860209.com-河内五分彩软件下载| www.951141.com-乐彩33app-| www.cai6177.com江苏快三基本走势图| www.81381.com-福利彩票角模式倍投| www.050036.com-黑彩群-| www.121486.com-加qq客服玩彩票| www.185268.com-36先7好彩3结果| www.500994.com-彩色艺术照哪年有的| www.570180.com-时时彩稳赚方法技巧| www.675736.com-瑞彩祥云怎么充值| www.815068.com-网上拉你玩彩票的人| www.582231.com-福彩3d快餐-| 福利彩票www.99677q.com| www.pq20.com-网易彩民彩票| www.10hq.com-体彩大乐透众彩网| www.99kk.com-彩票能研究出来吗| www.610800.com-沈阳彩钢板厂家| www.687505.com-彩票扫一扫最新版本| www.762667.com-中国福彩网打不开| www.829436.com-胜负彩18128期| www.906798.com-好彩vip手机下载| www.978755.com-好彩1开奖走势| 凤凰彩票www.77801y.com| www.990777.com-最新正规购彩平台| www.340123.com-金彩团队可靠吗| www.335207.com-买彩票app那个好| www.436178.com-河北体彩大乐透开奖| www.560975.com-南方双彩3d-| www.158575.com-黑龙江体彩中心地址| www.728416.com-乐彩3d杀码手机版| www.87.cm-晶彩拍照手机| www.092739.com-宁陵彩礼-| www.205633.com-生肖彩票开奖结果| www.2657.wang-时时彩个位杀码算法| www.702196.com-体彩283奖金多少| www.pe74.com-19052期足彩| www.5970.me-我要看体彩排列三| www.862941.com-今期六给彩开奖结果| www.950573.com-中中彩网-| 彩宝www.cb6888.com| www.56438.com-uc彩票是不是诈骗| www.713096.com-九州彩票合法吗| www.791040.com-彩票怎么自己选号码| www.867289.com-昨天福利彩票开几号| www.180320.com-福彩快391彩神| www.388167.com-星空彩票平台正规吗| www.8181.live-黄石彩票大奖| www.42je.com-彩神怎样提现| www.211034.com-如何玩快彩-| www.283926.com-什么彩票是2位数| www.359395.com-微博彩票信息|