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.306695.com-吉祥彩票app| www.559926.com-双彩论坛3d字迷解| www.680998.com-一分快3vip彩票| www.805303.com-网球彩票怎么买| www.903655.com-彩500彩票大发| www.970693.com-民政局管福利彩票吗| www.cp9638.com-中彩骗局-| www.403344.com-七星彩规律软件大全| www.186512.com-快三输了能上岸吗| www.451820.com-日本人天体彩绘图| www.074797.com-去彩票店怎么买彩票| www.35pj.cc-快三助理-| www.7497.top-体彩小终端深圳| www.83an.com-和彩云怎么换手机号| www.11co.com-彩铅画花卉教程图解| www.363313.com-生日彩票计算器下载| www.8553.org-大乐透彩之家| www.86368.com-新彩画-| www.791598.com-体彩金七乐怎么玩| www.769422.com-彩票合买大厅鸿运| www.he69.com-快三豹子追号计算器| www.23374.com-彩票讯息网-| www.351688.com-体彩反买-| www.578110.com-用酷彩吧买彩票| www.971674.com-电玩8彩票网安全吗| www.bc87.com-福彩3d开奖直播| www.gh24.com-什么是一分快三| www.v24.xyz-足彩4串1缩水技巧| www.716218.com-彩票开奖预测分析师| www.9977.tv-足彩大赢家媒体预测| www.295416.com-时时彩追长龙玩法| www.4531.cn-七星彩一二位差| www.60057.cc-河南福彩幸运| www.085816.com-310彩客网旧版| www.ds58.com-福彩快三登录| www.88ci.com-恒彩webapp-| www.59968.cc-约彩彩票合法| www.069668.com-彩神关注-| www.164455.com-竞彩篮球推荐足彩网| www.268753.com-湖南快三查询| www.347641.com-天天彩票软件贴吧| www.493801.com-今晚彩票开的什么啊| www.639178.com-体彩从未开过的号码| www.735468.com-彩吧3d图第一版| www.815916.com-福彩3d倍投计划表| www.937768.com-七星彩复式8个号码| www.vo.cc-北京大发快三网址| www.924540.com-福福彩彩票-| www.nd74.com-106老版本彩票| www.8653.cc-陕体彩11选五遗漏| www.787148.com-彩先知必中特| www.586334.com-彩票机器做手脚| www.17769.cc-爱投网买彩票合法吗| www.4411.biz-贩卖私彩构成什么罪| www.387352.com-派彩跟反水-| www.cp5398.com-北京快三最新版本| www.200070.cc-中国福体彩开奖结果| www.709162.com-腾讯分分彩输了贴吧| www.89ea.com-竞彩九串一-| www.478037.com-积分兑换福利彩票| www.566175.com-彩票预测下载手机版| www.635750.com-时时彩app888| www.995122.com-福彩主任被抓| www.bs58.com-新快三怎么玩稳赚| www.728018.com-名人彩票测速登陆| www.716261.com-51大发彩票时时彩| www.790766.com-彩票双色球模拟开奖| www.865557.cc-快三有人赚钱的吗| www.926464.com-手机上买彩票安全吗| www.976864.com-广西彩礼钱明细表| www.cai0599.com银川快三走势图| www.8027.vip-幼儿园彩虹伞| www.060601.com-体彩不准用87| www.180709.com-全能中彩彩票安全吗| www.261858.com-一品堂彩票安全吗| www.335587.com-让人买彩票的顺口溜| www.446332.com-广州羊城晚报好彩版| www.563026.com-福利彩怎么算中奖| www.647147.com-体彩排列3中奖公告| www.126209.com-创彩网是什么| www.214755.com-大乐彩cp-| www.323230.com-百度乐彩下载| www.25477.com-学彩铅风景画| www.121361.com-彩票计划导师微信| www.244392.com-京东彩票客服| www.72899.cc-彩八仙官网安卓| www.043624.com-足球彩票怎么买不亏| www.517285.com-福彩万能六码| www.657041.com-即时开彩下载| www.778310.com-彩贝壳官网电话| www.936080.com-博彩漏洞套利违法吗| 500彩票网www.690776.com| www.3td.cc-网上赌彩输死人| www.951902.com-娱乐k彩-| www.jx5.com-彩吧图-| www.d24.xyz-全国彩票开奖助手试| www.943563.com-南国彩票论坛区| www.994840.com-一分彩开奖号码| www.ap84.com-贵州省福利彩票兑奖| www.pj74.com-五百万彩票网app| www.393107.com-湖南动物总动员福彩| www.134911.com-体彩江苏7位数玩法| www.176.cx-app彩票软件大地| www.275056.com-青海快三开奖信息| www.381862.com-下载智慧彩-| www.969410.com-福彩3d书下载| www.82258.cc-足彩19031分析| www.180322.com-内蒙古快三百位| www.021002.com-彩票公众号老刘说彩| www.350015.com-玩彩票违法吗| www.424277.com-星彩桃花坞无惨| www.315862.com-彩虹5号电池| www.384040.com-美国28是什么彩票| www.505468.com-天悦体彩店安全吗| www.569162.com-福彩双色球红球技巧| www.626278.com-盈丰彩票快三| www.680588.com-幸运彩票重庆时时彩| www.740022.com-福利彩票几个号码| www.809777.com-今日体彩出奖号码| www.874594.com-上悔福彩网-| www.949029.com-国彩网登录-| www.987906.com-彩票系统网址| www.sz3.cc-重庆时时彩手机下注| www.726956.com-山东群英会彩票软件| www.789128.com-彩妆加盟店哪家好| www.8289.in-赣州福利彩票网站| www.21248.com-彩票搜狗走势图大全| www.71297.com-体育彩票推荐微信群| www.201656.com-河北快三36期| www.205200.com-安徽快三跨度一定牛| www.239612.com-快三是赌博-| www.343444.com-有没有买彩票养家的| www.372588.com-快三和之八-| www.986028.com-3d彩报中心彩报| www.cp30.com-乐彩神app下载| www.ws37.com-网易彩票时时彩| www.16jw.com-幸运彩乐园网址| www.7341.cc-体彩6加1开奖结果| www.d54.cn-ai预测彩票软件| www.171.me-彩票彩金对打| www.566893.com-青岛市体彩中心| www.672065.com-彩票发展下级合法吗| www.739686.com-苹果彩票最新线路| www.801851.com-福彩3d大花猫今天| www.865182.com-人人买彩票竞彩足球| www.930758.com-快三多少期出豹子| www.983098.com-网上买时时彩算赌博| www.jy0.cc-江苏福彩开奖公告| www.wd11.com-彩票往期开奖结果| www.16dl.com-万豪彩票助手怎么样| www.82601.com-足彩19025推荐| www.680658.com-彩票app哪个号| www.412561.com-彩钢岩棉板图片| www.508104.com-广东福彩色谱走势图| www.612700.com-飞艇彩票怎么玩法| www.684281.com-彩票稳赚不赔的方法| www.762469.com-贵州体彩网迟丽颖| www.297.live-领航彩票程序| www.2921.pw-兰州福彩兑奖地址| www.85384.com-彩票中容错怎样理解| www.on38.com-香港官方彩票投注网| www.0887.date-什么彩票能中一千万| www.633091.com-竞彩篮球怎么投注| www.484944.com-银川仟彩摸吧微信群|