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.6216.cm-彩票连环夺宝| www.kh08.com-福彩中奖号-| www.197982.com-青海福利彩票快三| www.20230.com-竞彩比分直播新浪网| www.67715.cc-打击私彩赌博| www.79992.com-足彩开奖结果500| www.060050.com-福彩彩票3d怎么玩| www.151116.com-江苏快三全天稳计划| www.167828.com-快三预测号-| www.120178.com-在线彩票投注靠谱吗| www.66nv.cc-彩票数字3走势图| www.0633.win-时时彩推广话语| www.051.org-时时彩对压流水| www.8016.cm-彩虹伞捕鱼-| www.72398.com-奔驰彩票官网qq| www.070164.com-彩神vl是真的吗| www.86477.cc-福彩太湖图-| www.177337.com-大发快三就是个坑| www.ur76.com-彩吧论坛首页官网| www.vg92.com-江苏福彩网首页| www.82hm.com-江西体育彩票合作| www.53on.com-福利彩票彩票赚钱吗| www.wj01.com-福彩七乐彩开奖时间| www.3297.bid-978彩票最新版| www.268060.com-看彩-| www.690157.com-竞彩足球魔方| www.171420.com-彩迷网-| www.282523.com-彩票老师带人可信吗| www.393629.com-儿童简单彩铅画| www.744191.cc-福彩双色球多少年了| www.rc40.com-香港体彩走势图| www.25pc.com-初学者彩票怎么买| www.151688.com-彩乐汇注册-| www.916634.com-彩票双色球预测号码| www.987444.com-黑龙江福彩p62| www.mp9.com-江苏快三怎么推算| www.96547.com-彩礼退还的三种情形| www.7432.pw-上海体彩站转让信息| www.358228.com-七星彩铁卒精准| www.762611.com-5分时时彩官方网站| www.888561.com-凤凰彩票客户端下载| www.21ut.com-七星彩下期杀号预测| www.5872.bid-冒领他人彩票犯法吗| www.739424.com-999彩票网下载| www.706967.com-华军彩票大赢家软件| www.854443.com-时时彩9码倍投方案| www.951621.com-幸运快三吧-| www.eu.com-北京快三推荐和预测| www.y65.com-彩票真能中奖吗| www.26162.cc-比喻彩虹像什么| www.80665.com-恒达网彩票靠谱吗| www.748088.com-彩票亿元大奖国外| www.741313.com-239期体彩独胆| www.261078.com-吉祥彩票网可靠吗| www.380768.com-亿彩票网站-| www.6106.vip-釉上彩和釉下彩区分| www.722448.com-网络快三怎么骗人| www.38777.com-中彩彩票官方| www.6638.in-荐彩唯彩看球| www.613306.com-福彩充值卡-| www.718736.com-关于彩虹的寓意| www.826918.com-go彩票骗局-| www.973831.cc-快三精准计划扣扣群| www.hb49.com-中国福利快三| www.49do.com-彩票平台制作安装| www.vv22.com-买彩票顺口溜大全| www.16tx.com-体彩排五彩票| www.968666.cc-重庆微信时时彩群| www.980322.com-27彩票-| www.908899.com-福彩交流-| www.991919.cc-彩票中奖那几个数字| www.dm73.com-快三一个号码怎么组| www.46pj.cc-福建福彩快讯手机版| www.2579.win-中信福彩app下载| www.04531.com-最新体彩政策| www.528878.com-嘉兴体育彩票竞彩店| www.818871.com-彩票筛选-| www.319613.com-福彩三的和值表视图| www.397031.com-2000年彩票-| www.763326.com-做彩票代理犯法吗| www.2576.vip-中信积分的彩票入口| www.60415.com-彩票125定律| www.964292.com-体育彩app下载| www.520898.com-快三这期能出什么号| www.610602.com-彩钢瓦水槽安装图片| www.690881.com-ok网彩票-| www.775682.com-福彩纳税-| www.858045.com-快三是彩票吗| www.922835.com-福利彩票可以过户吗| www.988037.com-福利彩票中心怎么样| www.aq06.com-福彩网怎么下载| www.a74.net-体彩大乐透直播频道| www.72fi.com-体彩海南4加1| www.47990.com-大玩家彩票下载| www.101921.com-官方幸运快三| www.172318.com-快三大小单双技巧| www.505381.com-博彩彩票网站| 幸运彩票www.444165.com| www.571302.com-竞彩店买足彩| www.5782.top-手机彩票哪个好| www.29895.com-非法卖彩票-| www.998010.com-彩票反水高平台| www.x53.me-快钱彩票白菜群| www.201591.com-全员彩票开奖查询| www.cp101.cc-鬼谷子22彩票| www.me67.com-福l彩3刃于奖情况| www.414221.com-至尊博彩什么意思| www.558129.com-大赢家时时彩| www.624036.com-足球彩票单场玩法| www.696617.com-彩票预测推荐3d| www.761242.com-凤凰彩票平台安全吗| www.821717.com-彩票异地领奖时间| www.429960.com-一分彩彩票网| www.553010.com-七星彩在哪个台开奖| www.67vo.com-辉煌彩钢夹芯板厂| www.92574.com-江苏体彩足球竞彩| www.qo39.com-快三αpp-| www.647922.com-天下彩5334-| www.997.cm-高频彩票经验总结| www.6392.wang-欢乐彩票首页| www.45197.com-送彩佥金-| www.065369.com-33彩票平台怎么样| www.170669.com-马来西亚和乐彩| www.257781.com-709彩票网官网| www.373332.com-好几个699彩票| www.810650.com-彩票湖北快三走势图| www.916871.com-彩票平台注册送财金| 天天彩票www.2373t.com| www.ij02.com-江西快三开奖平台| www.vv27.com-乐购彩票是真是假| www.629700.com-幸运彩票是违法的吗| www.733639.com-山东快三官网| www.813612.com-微信彩票游戏规则| www.886469.com-微信上下分中华彩| www.cp759.com-河北快三走势图新版| www.78oh.com-什么脸型中彩票| www.559024.com-包头市体彩中心位置| www.563295.com-彩民乐和阳光探码| www.19al.com-c更多精彩视频| www.094008.com-中国福彩中心开机号| www.709059.com-彩之家是骗局揭秘| www.872636.com-福彩快3推荐号码| www.990610.com-500彩票股价| www.wz03.cc-全民中彩足球彩票| www.962633.com-时时彩百变计划在线| www.509633.com-博彩系统-| www.667167.com-七乐彩五加一几等奖| www.395970.com-无锡体彩兑奖时间| www.281522.com-时时彩和值看号经验| www.437738.com-足彩中的专业术语| www.658590.com-范伟买彩票中的号码| www.55705.com-网易彩票软件可信吗| www.925037.com-福彩彩票开奖直播| www.34te.com-新闻彩票中奖| www.854.tv-超极彩票助手| www.007940.com-澳客竞彩开奖网| www.002334.com-竞彩足彩计算器| www.131176.com-许昌县彩礼钱| www.384389.com-外网彩票网站| www.533614.com-七星彩算法技巧视频| www.bh2.com-湖北精彩十分3d| www.21223.cc-竞彩资讯网-| www.00719.com-特彩把旧原版| www.52888.com-买福彩双色球|