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.24266.com-彩铅画人物古风背影| www.025744.com-七乐彩3加1有钱吗| www.807913.com-黑桃k时时彩| www.891914.com-彩票开奖提醒软件| www.976377.com-彩票开奖直播app| www.i40.hk-下面彩票开奖大全| www.710.in-做网彩代理犯法么| www.15864.com-彩名堂手机计划| www.81346.com-官方平台重庆时寸彩| www.056819.com-彩票从网上怎么购买| www.393125.com-彩铅画海上日出| www.862935.com-泰安体彩管理中心| www.6ez.com-体彩游戏规则| www.4554.top-七星彩走势图360| www.99297.cc-求足彩靠谱app| www.128367.com-福彩和体彩怎么玩法| www.282295.com-黑彩时时彩-| www.4260.vip-吉祥彩登录-| www.39931.cc-彩票巴巴下载| www.5mc.cc-重庆时时彩倍投技巧| www.3528.biz-重庆时时彩分钟软件| www.097215.com-体育彩票公益| www.268903.com-go彩票可靠吗| www.909750.com-帝彩塑胶地板| www.42557.com-搜狗体彩-| www.061105.com-美国一分彩计划| www.351353.com-小伙世界杯体彩| www.57948.com-福彩图迷汇新彩网| www.077308.com-彩色复印机排行| www.54510.com-微信玩重庆时彩的群| www.6467.cn-彩票销售公司| www.57rk.com-山东彩票群英会查询| www.208.net-好彩蓝莓双爆香港| www.530778.com-彩铅颜料调色表口诀| www.479508.com-足彩半场胜负技巧| www.678698.com-白菜送彩金58| www.952953.com-新粤彩广东版| www.ug39.com-qq彩票开户送37| www.326028.com-彩亿彩票-| www.398569.com-首存赠送100彩金| www.764708.com-悟空彩票app| www.pz14.com-彩588下载-| www.836671.com-中原和彩-| www.51495.com-双色球中彩网首页| www.168348.com-怎样玩快三-| www.279777.com-香港福利彩票资料站| www.626504.com-紫微彩票占卜| www.854625.com-大众六台彩开奘结果| www.gj21.com-彩票中奖号码| www.19sa.com-博汇彩票最新消息| www.2928.site-开心彩怎么玩| www.873614.com-青蛙彩票网站开奖| www.127470.com-彩虹世界官网链接| www.301736.com-球彩台下载-| www.310411.com-吉林省彩票十一选5| www.978126.com-施工围挡彩钢| www.571302.com-竞彩店买足彩| www.653992.com-基诺彩彩票开奖记录| www.767116.com-关注一下彩票开奖| www.836276.com-顺丰彩票app苹果| www.904434.com-彩神合法吗-| www.970235.com-福彩相年富-| www.cai1944.com我找到时时彩漏洞了| www.a70.top-福彩三d合值走势图| www.675869.com-好彩网论坛3d| www.923007.com-福彩3d开机号试| www.im.cc-河北快三综合走势图| www.213595.com-彩神xapp-| www.284949.com-时时彩技术分享| www.6103.vip-如何分辨釉下彩| www.8620.vip-彩票电视频道| www.84460.com-安装彩钢瓦价格表| www.318615.com-大富彩票-| www.400956.com-七星彩老鼠精长居| www.522661.com-带人玩彩的微信群| www.596670.com-彩神争霸688彩票| www.591176.com-三度博彩-| www.661342.com-彩票专业的学校| www.aw84.com-体育彩票5d开奖| www.vd83.com-智慧彩软件-| www.13fh.com-易彩网买彩票安全吗| www.79oc.com-今晚彩票奖号| www.3000.tv-18彩票首页-| www.815606.com-福彩黑圣手图| www.901716.com-体彩今天试机号金码| www.965263.com-时时彩预测计划51| 天天赢彩票www.73736e.com| www.58917.com-两亿彩票网-| www.772531.com-pc福彩是什么| www.991804.com-分分彩后一稳赚技巧| www.qy14.com-大奖分分彩人工计划| www.8142.xyz-北京体彩快中彩| www.004912.com-彩票开奖软件下载| www.318490.com-福彩排列3奖金| www.316234.com-彩票业主吧-| www.455266.com-皇冠国际彩-| www.77557.cc-竞彩滚球术语对照| www.006455.com-七星彩南国论坛了之| www.813688.com-玩博彩能赚钱吗| www.19hh.com-网上买私彩犯法不| www.355999.com-中国福彩双色球图片| www.sr08.com-竞彩体育彩票店提成| www.4374.biz-9cbcc彩票计划| www.997742.com-福彩江苏基本工资| www.wa24.com-七星彩今晚开奖查询| www.495224.com-彩漂可以洗黑色衣服| www.j82.club-福彩体彩谜语藏机图| www.6017.shop-胜负彩19061| www.061314.com-2彩88官网-| www.983253.com-二分时时彩走势图| www.r49.shop-网络彩票提现成功| www.964045.com-足彩14场一等奖| www.ls50.com-体育彩票任五开奖| www.332359.com-微商中彩彩票网| www.381028.com-福利彩票微信二维码| www.666730.com-乐彩网怎么充值| www.986450.com-彩票破解手机软件| www.36lf.com-七星彩中间值走势图| www.966239.com-福彩投注-| www.ft70.com-快乐彩开奖号码查询| www.7355.org-彩虹6号多大| www.110340.com-福彩中心主任王素英| www.672310.com-福建福彩双色球报纸| www.771790.com-澳洲五时时彩| www.862853.com-七乐彩31期-| www.929337.com-盈彩吧是正规的吗| www.984517.com-福彩3d自动选号器| www.pv7.com-福彩8-| www.012353.com-捷豹彩票平台app| www.195633.com-吉林快三开奖的走势| www.006941.com-欢乐彩app-| www.573102.com-惠民彩票靠谱吗| www.712615.com-分分彩永不输钱方案| www.852785.com-中国体育彩票一等奖| www.957534.com-青蛙彩票六会彩| www.cp6623.com-北京快三最大遗漏| www.462898.com-福彩3d黑龙赌王| www.046621.com-288彩票安卓| www.144693.com-28彩票官网-| www.222806.com-大奖彩票棋牌| www.286665.com-如何申请福彩投注站| www.535468.com-彩票都有几位数| www.002228.cc-中国奖金最多彩票| www.090084.com-44彩票入口导航| www.159065.com-福利彩票机选摇一摇| www.227245.com-快三网站手机版| www.290068.com-3d彩宝网开机号| www.351775.com-期期中彩票资讯网| www.852019.com-足彩分析哪个网站好| www.zt32.com-彩虹6号墨冰多少钱| www.7381.xyz-色彩图片风景| www.34fv.com-彩富计划软件| www.4321.pro-彩票序列号-| www.9977.tv-足彩大赢家媒体预测| www.97698.cc-五分快三的规律| www.988605.com-必中彩票app下载| www.bs50.com-彩500app-| www.918822.com-彩票走势模拟投注| www.973306.com-彩虹岛游侠-| www.xw2.cc-七乐彩票大发快三| www.148819.com-河北快三冀彩宝| www.591069.com-七星彩19022期| www.485678.com-时时彩阶梯倍投技巧| www.800261.com-体育彩票相关知识|