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.qa36.com-132彩票安卓版| www.42ed.com-世界杯足彩比分竞猜| www.332147.com-彩票头奖的预兆| www.81865.cc-时时彩单号遗漏最大| www.696981.com-金华体彩申请| www.260362.com-福彩快3手机下载| www.231740.com-好彩票安卓版| www.349559.com-快三套选是什么意思| www.466378.com-乐彩网怎么挣钱| www.564040.com-彩票快三是不是假的| www.650251.com-小班彩虹伞儿歌| www.40692.com-中彩是什么软件| www.705952.com-体彩足球竞彩网首页| www.814399.com-中彩网安微快三| www.955697.com-关于中彩票的群名| 彩吧www.856458.com| www.vk41.com-大彩鲸彩票网| www.87kn.com-福利彩票有什么规律| www.269889.com-福彩快三表格| www.9650.cm-福彩3d开售几年了| www.60551.cc-止痢快三秒-| www.632070.com-366彩票下载| www.737875.com-河南福彩一定牛| www.20247.com-竞彩258网正规吗| www.81383.com-众彩网誉京华| www.60457.com-中福彩下载-| www.86872.com-河北众乐快三预测| www.603416.com-足彩外围平台| www.690087.com-福彩中彩网擂台赛| www.777692.com-新星彩网站-| www.879902.com-105彩票违法吗| www.976046.com-开封订婚和结婚彩礼| www.dp72.com-福利彩票苹果版| www.98577.com-清镇福彩中心地址| www.893384.com-乐彩网的计划准不准| 福彩www.86267q.com| www.9376.online中国福彩幕后老板| www.974732.com-买彩票守号-| www.ov74.com-福彩3d秘密-| www.869273.com-七星彩为什么没人买| www.436400.com-红河州彩票管理中心| www.762713.com-彩票行业资讯| www.908112.com-七乐彩经典杀号公式| www.716595.com-彩铅樱桃的画法| www.856138.com-彩票娱乐反水| www.9117.cm-中大奖彩票站分多少| www.928557.com-大奖彩票网是黑网吗| www.xp43.com-19020七星彩| www.13691.cc-福彩秘密通道一二| www.63353.cc-彩礼不能超过两万元| www.014125.com-七星彩前4个号码| www.085969.com-彩票反水网站| www.211823.com-山东彩票十一选五| www.285905.com-彩79彩票-| www.356903.com-中山申请体育彩票| www.441069.com-湖北体育彩票电话| www.525024.com-永利彩票网站可靠吗| www.588631.com-安徽快三彩网| www.807703.com-女孩梦到彩票号码| www.692026.com-达人彩票-| www.b11.com-福彩2019030| www.635331.com-七彩假期小报| www.853630.com-天津电脑福利彩票网| www.929342.com-盈彩在线下载安装| www.988708.com-江西体彩返点多少| www.cm26.com-利民彩票快三攻略| www.p03.com-微彩票网站-| www.63pz.cc-快3彩-| www.3043.pw-彩世家app-| www.17587.cc-陌陌彩票app下载| www.60549.com-乐和彩票苹果| www.010173.com-彩票中奖几个亿| www.079892.com-网络彩票玩法介绍| www.143292.com-彩虹8app-| www.220536.com-北京5分彩官方数据| www.7573.cc-足彩滴滴跟单app| www.711223.com-彩票预算软件排行榜| www.280170.com-圣地彩注册平台| www.503300.com-彩票平台代打可靠| www.259957.com-如意彩票-| www.39735.cc-吉林快三推荐和值| www.54374.com-下载新浪彩票网| www.020139.com-体彩申请-| www.25466.com-初级风景彩铅画| www.15os.com-19500彩票吧| www.ib34.com-微信足彩-| www.304178.com-甘肃快三走势图下载| www.66162.cc-体彩模拟-| www.627036.com-彩票九苹果版下载| www.546822.com-体育彩票申请代销点| www.512644.com-秋天田野的彩铅画| www.4853.xyz-彩票818充钱| www.139546.com-网上时时彩赌博作假| www.395138.com-福利彩票直播什么台| www.638533.com-色彩静物临摹| www.724479.com-男主买彩票中奖后将| www.1052.cn-甘肃快三开奖助手| www.699850.com-富余彩票网-| www.53iw.com-中国体彩多少钱一张| www.916995.com-彩铅画风景简单| www.180509.com-上海福彩网选4| www.606350.com-足彩停售哪里可以买| www.920052.com-摇彩票app-| www.ik14.com-500购彩下载| www.517188.com-福彩乐彩论坛| www.575333.com-体彩周几开奖时间| www.549520.com-哪里能在线投注足彩| www.094503.com-1717彩票-| www.fj89.com-五分快三好彩网计划| 吉利彩票www.66376d.com| www.129748.com-中奖彩票双色球图片| www.255228.com-时时彩走势图app| www.998335.com-pk彩票邀请码| www.556209.com-新三国精彩打斗集数| www.87308.com-宁夏体彩大乐透中奖| www.172978.com-湖北快三基本走| www.980040.com-足彩胜平负玩法| www.19jq.com-大智慧彩票网合法吗| www.623313.com-统一彩票软件| www.06.la-玩私彩处罚-| www.235795.com-足彩预测网-| www.225929.com-刷彩票流水-| www.567813.com-体育彩票足彩百科| www.73030.cc-福彩都有多大得奖| www.cai5502.com内蒙古快三360| www.210362.com-快三第一门户app| 金冠彩票www.c4528.com| www.791655.com-宁夏福彩中奖记录| www.484200.com-乐彩客苹果下载| www.84928.com-七星彩图-| www.r32.net-快三8期容易开| www.587.net-内蒙古福利彩票中心| www.762397.com-87彩店app停用| www.700326.com-彩票云发购是真是假| www.vx70.com-贵州省福彩中地址| www.872149.com-q彩客户端-| www.3891.bid-18k彩金手镯| www.33264.com-彩票属于国有企业吗| www.020649.com-贵阳自助彩票机| www.377738.com-腾讯时时彩游戏规则| www.ln93.com-江苏快三投柱技巧| www.238791.com-5亿彩票app下载| www.6588.love-彩168官方网站| www.105502.com-三地彩票-| www.250596.com-全民彩票能玩吗| www.581078.com-开彩吧官方网站| www.3086.cn-18102彩票-| www.096059.com-体彩七星彩推荐号码| www.8430.vip-湖北彩礼多少| www.444724.com-你朱眸里的五彩世界| www.717579.com-水彩入门-| www.1750.vip-新彩计划群-| www.030053.com-彩虹屁语录-| www.83ij.com-重庆vr十分彩| www.2492.cc-彩专家人工免费计划| www.336619.com-9万彩票官网| www.931882.com-多多中彩票网| www.500117.com-97o彩票-| www.4366.in-中彩票后的生活| www.256167.com-全球彩票安卓版| www.5938.com-体彩排三走势图综| www.456714.com-彩易达怎么样| www.961379.com-彩票奖金多少| www.mm73.com-时时彩心得技巧经验|