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天

知道了
亚洲28 www.vh82.com-五分快三下载| www.057855.com-怎样学打彩票| www.233018.com-海南福彩快三| www.840036.com-pc蛋蛋彩-| www.572635.com-彩专家大牛在线| www.47vs.com-好的福彩3d的书籍| www.298955.com-体彩排3试机号今天| www.678004.com-南方南方双彩网首页| www.462003.com-私彩代理违法吗| www.556680.com-在线七乐彩机选五| www.637626.com-附近福利彩票| www.267736.com-湖北精彩10分规则| www.370193.com-ee彩正规吗-| www.298000.com-旧版人人中彩票| www.385673.com-合一彩票登录网址| www.543054.cc-怎样彩票才能中奖| www.279359.com-三分时时彩免费计划| www.651210.com-代买欧洲百万彩| www.460024.com-懂彩帝比分-| www.383148.com-龙虎合微信时时彩| www.5468.shop-江苏快三出号分析| www.14541.com-重庆彩五星独胆技巧| www.467542.com-福彩快三手机平台网| www.882451.com-河北体彩网官| www.976789.com-河南濮阳彩礼价目表| www.jp6.cc-河南福彩快三电脑版| www.81mw.com-彩神通资料-| www.373676.com-大家赢彩票正规吗| www.019594.com-贵州福彩app| www.393129.com-彩铅画海豚-| www.mt11.com-汇彩网快3-| www.14mk.com-七星彩合数与对数| www.97126.cc-北京单场足彩单场| www.069590.com-神彩网69880| www.166476.com-彩票快三怎么玩| www.45898.com-qq赛车彩票-| www.80877.cc-中国体彩排列7| www.971252.com-福彩刮刮卡怎么玩| www.f98.cc-百博海南七星彩| www.53qe.com-49彩票论坛-| www.0800.cm-彩播平台直播下载| www.778065.com-玩官方彩可靠吗| www.36xa.com-dd彩违法吗-| www.3505.cc-彩票网站维护| www.53371.cc-时时彩精选-| www.008546.com-16号的体彩开奖号| www.5866.xyz-现有彩站出兑| www.588642.com-彩帝彩票是规网站吗| www.683651.com-彩61安卓版下载| www.791756.com-彩票中奖流程| www.888017.com-快三赔率表-| www.966229.com-凤凰快三下载安装| www.60kj.cc-福彩平台刷单| www.861252.com-快三012路运用| www.987234.com-福彩全民中奖独胆| www.er65.com-彩运8平是真的吗| www.809083.com-105彩票合法吗| www.440163.com-英雄联盟彩票在哪买| www.403677.cc-福利彩票机器摇奖| www.629999.com-海南七星彩大奖梦册| www.509664.com-呼和浩特市体彩中心| www.600058.cc-彩票中500万概率| www.685009.com-七彩网软件-| www.766588.com-乐彩客靠谱吗| www.858832.com-彩票网站搭建一条龙| www.949162.com-福利彩票旗下传统彩| 好运彩票www.009hy.cc| www.oa87.com-99彩票正规吗| www.325991.com-3d彩经网选胆图| www.398807.com-彩界传奇毒胆| www.499887.com-网易彩票欢乐豆| www.561587.com-网上买彩-| www.618546.com-体育彩票难做| www.678155.com-乐彩3d字谜图谜| www.742059.com-香港新星彩手机网址| www.q21.cc-江苏快三正规吗| www.02681.com-网易彩票中奖不承认| www.81384.com-i胡北快三号码统计| www.028720.com-黑客能不能破解彩票| www.113905.com-彩票与生活报刊| www.92ia.com-彩票玩法倍投| www.4117.com-我想看七星彩规律表| www.9184.cc-网上买彩票可以挣钱| www.15iz.com-时时彩开奖时间间隔| www.495315.com-lol红蓝博彩| www.700936.com-二元投资买彩票笑话| www.969349.com-梅州彩票中奖新闻| www.50103.com-专家预测4场进球彩| www.062385.com-天天乐彩票-| www.160350.com-职业时时彩玩家绝招| www.25892.com-福利彩首页-| www.78616.cc-福彩主任王素英微信| www.583359.com-江苏体彩7位数规则| www.437413.com-彩之源彩票是真是假| www.273044.com-远洋竞猜型理财彩票| www.850537.com-快三是不是假的| www.133463.com-广酉福彩选号助手| www.233885.com-福彩3d字继-| www.346847.com-李彩桦吻戏-| www.443990.com-好乐多彩票网| www.573823.com-山东体彩扑克3规律| www.676040.com-莆田政府规定彩礼钱| www.782044.com-500万彩官网| www.860306.com-河内五彩计划3胆| www.948612.com-彩票公益金申请书| 福利彩票www.78700c.com| www.b87.club-江西红快三专家预测| www.169267.com-安徽快三下载| www.190693.com-搜索河北省快三| www.298985.com-体彩体彩开奖号码| www.565158.com-彩票大奖没人领| www.671979.com-彩宝彩票官方下载| www.810816.com-彩尊国际官网| www.970876.com-福彩刮刮卡-| www.gm89.com-驻马店彩礼-| www.91997.cc-足彩过滤软件| www.421224.com-幸运中彩票牛牛玩法| www.747900.com-雅彩-| www.607478.com-乐彩网中彩网| www.525108.com-我赌快彩输了好多钱| www.880234.cc-甘肃快三彩控票| www.fm61.com-福彩跨度-| www.70ct.com-鼎丰彩票下载安装| www.7846.com-体彩胜负彩吧| www.q63.cc-广西快三外围网站| www.73oa.com-手绘荷花彩铅画教程| www.1661.org-福彩3d五行对照表| www.6766.net-七彩娱乐app| www.06527.com-500竞彩比分| www.8033.in-简单日落水彩画| www.58034.com-2018网上购彩| www.010363.com-app23彩票-| www.080841.com-天天中彩票多乐快三| www.145523.com-彩票课堂-| www.222029.com-时时彩挂机软件坑| www.369417.com-牛币彩票-| www.632389.com-彩票中奖领奖视频| www.na5.com-彩16-| www.xf63.com-甘肃快三冠军走势图| www.2204.love-京彩官网-| www.659553.com-韩职联足彩-| www.731942.com-爱彩人-| www.815600.com-排列五是体彩吗| www.879031.com-澳洲快三开奖| www.939660.com-北京快三和值图表| www.982226.com-民政部福彩中心| www.cp9193.com-近三十期快三中奖号| www.ir11.com-足球竞彩分析预测| www.xr45.com-中国福利彩票35期| www.81.la-彩票三d牛人中奖| www.157269.com-竞彩交易冷热指数| www.228968.com-体彩26期6-| www.287388.com-今日安徽快三推荐| www.072223.com-光大彩票-| www.69699.com-时时彩大彩鲸| www.03544.com-七星彩怎么做代理| www.747953.com-彩乐瀑官网下载| www.827289.com-彩票里面什么是龙| www.ck27.com-吉林体彩网-| www.xv96.com-澳发彩票网站| www.71kc.com-体彩排列三字迷图迷| www.078042.com-福彩五分彩-| www.975174.com-七星彩图规最新| www.ga97.com-浙江快乐彩-|