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.929602.com-全民星彩官网| www.357556.com-彩神通会员4码下载| www.kn21.com-8k彩票快三-| www.586686.com-稳定赠送彩金平台| www.4796.top-彩虹六号被禁原因| www.062171.com-彩票快3下载| www.024375.com-五行与彩票选码| www.869657.com-彩票k线做计划| www.41506.com-玩彩票害死人| www.253357.com-好彩妹口头禅| www.360709.com-dd彩票软件-| www.481535.com-取消和彩印基础包| www.568503.com-体彩排列三断组分析| www.655897.com-彩釉钢化玻璃| www.733581.com-成都竞彩快3| www.809882.com-赢彩网是合法的吗| www.896480.com-福彩短信投注真的吗| www.975926.com-彩礼三万八吉利吗| www.gh.cc-中国官方彩票app| www.ru36.com-彩票害人输了八十万| www.760900.com-广东福彩好彩3| www.56ko.com-彩票返利是什么意思| www.1411.xyz-网络博彩推广犯法吗| www.8826.wang-飞鱼彩票有没有规律| www.37832.com-6234彩票网-| www.b49.tv-南昌彩票兑奖中心| www.07323.com-大众彩票下载| www.69546.com-福彩3d查询-| www.472633.com-彩泥怎么做-| www.659123.cc-彩神平刷软件好用吗| www.802122.com-彩运无限可靠吗| www.852378.com-浙江福利彩票12| www.947429.com-彩吧论坛论坛首页一| www.994230.com-彩票幸运选号器下载| www.xh55.com-优乐彩假平台| www.207120.com-至尊vip彩票| www.8503.top-中彩双色球预测专家| www.60430.com-凤凰彩票能提现吗| www.51kt.com-竞彩足球胜平负| www.1911.cc-彩福快三是官方的吗| www.4029.net-sb博彩-| www.53154.cc-注册668彩票| www.123025.com-彩神冠军平刷破解版| www.275281.com-香港幸运快三| www.366675.com-彩铅可以调色吗| www.378219.com-万豪彩票助手手机版| www.01335.com-送58彩金-| www.63825.cc-足彩竞猜胜负下载| www.5893.bid-万州体育彩票销售点| www.55ss.cc-体彩赛车-| www.024436.com-网络彩票黑平台| www.606537.com-博盈彩票平台地址| www.41vf.com-足彩世界杯对阵表| www.ud4.com-苏快三-| www.271187.com-彩10app-| www.456190.com-梦见死人打什么彩票| www.626920.com-大有彩票账号注册| www.783533.com-网络彩票赢了二十万| www.678076.com-快三全部号码表格| www.42pl.com-猫彩绘图片大全| www.066286.com-重庆14彩开奖号码| www.144210.com-北京足彩返还率多少| www.225352.com-福彩河南快三走势图| www.301120.com-送彩金的赌博平台| www.372324.com-肥东体彩大奖| www.166725.com-中国最大的快三平台| www.653630.com-富游彩票app| www.813460.com-真人真事足彩博客| www.939004.com-澳客彩票以前版本| www.060590.com-全天时时彩计划网| www.497583.com-中彩网双色球图表| www.575494.com-山西福彩中心招聘| www.869726.com-彩票黑平台冻结账户| www.973402.com-网上买彩票是套路| www.cp826.cc-苹果快三助手免费版| www.zk03.com-038彩票注册| www.19168.cc-广西福利彩票app| www.088866.com-吉林福彩快三网址| www.670756.com-福利彩票造假视频| www.744747.com-中国最大合法的彩票| www.813855.com-河北体彩网开奖公告| www.886695.com-新浪福彩双色球杀号| www.950566.com-乐彩网灵宝淘哥双胆| 乐彩www.lczg5.com| www.639762.com-牛牛彩吧-| 华夏彩票www.62355.com| www.347228.com-彩票大奖中奖故事| www.431827.com-无敌时时彩在线计划| www.535822.com-两元一注的彩票奖金| www.597356.com-贩卖私彩构成什么罪| www.662541.com-盛兴彩票网v3导航| www.734538.com-凤彩的意思-| www.803827.com-海南注册体育彩票| www.870271.com-福彩3d胆拖对照表| www.938569.com-双赢彩票网计划| www.984604.com-广西福彩软件下载| www.ao70.com-贵州福彩中心电话| www.921871.com-91彩神可以玩吗| 13e彩票www.817824.com| www.mc11.com-彩投彩票app下载| www.rl00.com-七乐彩9中5-| www.907576.com-快彩活动app| www.93jb.com-2345天天彩票| www.8376.biz-旺角彩皇现场开奖| www.93995.com-体彩责任彩票| www.0yx.com-同乐城彩票网| www.024935.com-澳门福彩快三查询| www.72588.com-福彩3d报纸10期| www.026049.com-淘宝上买彩票靠谱吗| www.131153.com-2019年各省彩礼| www.253624.com-哪款竞彩app好用| www.420111.com-955彩票手机版| www.518398.com-皇都彩票我的账户| www.638467.com-邻近色彩构成图片| www.777090.com-宝盈彩app-| www.855430.com-彩先知288元一台| www.951036.com-彩票8816真没有| 丰彩娱乐www.fcyl5.com| www.j96.net-深圳体彩网点申请| www.179273.com-江苏快三真能赚钱吗| www.539071.com-时时彩组选复式| www.645008.com-法贝热彩蛋哪里买| www.761964.com-竞彩技巧app下载| www.287245.com-彩之家快三-| www.959544.com-鸿运彩票网诈骗程序| www.cp546.com-淘宝彩票-| www.uk5.com-甘肃福彩3d查约| www.1703.cc-e彩票手机-| www.513030.com-万博彩票一直在维护| www.123744.com-这期七彩奖结果| www.218376.com-易彩快三准确计划| www.366464.com-3g彩票人工计划| www.473258.com-彩票大奖有重复的吗| www.805650.com-精彩彩票登陆| www.311991.com-体彩七星彩网上购买| www.461449.com-私彩拉人-| www.567273.com-中国体育彩票42期| www.663610.com-cba体彩官网| www.731498.com-易彩注册链接| www.892972.com-彩票缩水过滤| www.984967.com-今日福彩3地字迷| www.if85.com-彩票中奖故事| www.90db.com-博彩行业怎么做| www.lq23.com-跟计划买彩票可信吗| www.45726.com-彩吧第五版-| www.910985.com-渐江快三开奖| www.162205.com-江苏e球彩胜负玩法| www.3713.biz-七星彩最准的头尾| www.10057.com-王世辉彩票回血| www.771017.com-三分快三全天计划网| www.755761.com-多彩苹果-| www.853529.com-天津好彩打印官网| www.977907.com-如何分析足彩赔率| www.ex8.com-快三在线机选| www.575036.com-淘彩平台靠谱吗| www.46665.com-时时彩赌番摊| www.965432.cc-01彩票是什么| www.am21.cc-网上叫人买彩票骗局| www.065002.com-最新彩票台子| 500彩票www.50052r.com| www.396440.com-今天福彩什么开奖| www.92gz.com-体彩列三开奖| www.691900.com-天易彩票正规吗| www.622723.com-彩票9acc-|