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天

知道了
百盈PK10 www.29rb.com-福彩昨日开奖号结果| www.vl95.com-福彩呼和浩特中奖| www.288217.com-快开福彩是真的吗| www.393994.com-色彩对比作业| www.199093.com-河北快三今天预测| www.829855.com-体育彩票自动销彩机| www.600462.com-七星彩贴吧-| www.139282.com-567彩票安卓| www.326426.com-排三彩宝网走试图| www.6441.vip-福彩有哪些玩的| www.qo57.com-广西福彩官网客户端| www.3031.biz-44彩票黑网-| www.261311.com-凤凰vip彩票网| www.804060.com-福彩3d字迷画谜| www.923571.com-秒速快三是正规的吗| 大赢家彩票www.395411.com| www.250173.com-买彩网app-| www.86xf.com-福彩3d中天图库网| www.102278.com-603彩票-| www.448078.com-彩票老谢专栏| www.567120.com-南京体彩中心| www.cai0678.com北京快三和值走势图| www.463412.com-天冠彩票邀请码| www.027641.com-易彩网黑我钱| www.151569.com-三d太湖字谜多彩网| www.868899.com-快彩乐乐-| www.539826.com-香港58158彩| www.311954.com-红牛彩票网址| www.566147.com-火星彩票靠谱吗| www.99wu.cc-体育彩票篮球大小分| www.719038.com-彩虹可以想象成什么| www.698263.com-黑金博时时彩计划| www.790933.com-彩票模拟机选软件| www.870624.com-大走势图乐彩走势图| www.939319.com-快三怎么投注有盈利| 购彩网www.79gcw.com| www.757478.com-购彩启明团队| www.952468.com-8888彩票合法吗| 开心彩票www.569361.com| www.58580.cc-三d试机号彩吧| www.14tn.com-赢彩双色球-| www.325191.com-海南彩票4个号码| www.vf81.com-网易彩票官方下载| www.587601.com-旺彩双色球软| www.724770.com-买彩票是不是投资| www.490058.com-会员登陆百胜彩票| www.646770.com-怎样成为职业彩民| www.950611.com-乐彩客彩票网页版| www.cp8011.com-广西快三遗漏| www.844793.com-彩票识别码图形| www.5842.top-足彩半全场-| www.1yy.cc-鸿运彩票能玩吗| www.291184.com-甘肃快三二码遗漏| www.514163.com-奥百万彩票49选7| www.231463.com-湖北快三多少期| www.359566.com-彩票几点不能买了| www.031234.cc-淘宝彩票中奖真的吗| www.2021.in-6768彩票网平台| www.85928.cc-福彩店附近有吗| www.383962.com-五六彩票-| www.025198.com-易彩堂购彩大厅| www.36958.com-万彩巴彩票| www.052192.com-彩票合买怎么计算| www.4020.la-抑郁症买彩票中奖| www.36156.com-凤凰快三-| www.252422.com-手机全民彩票可靠吗| www.89615.com-彩票248下载| www.371199.com-澳客彩票手机下载| www.566588.cc-1068孞彩票入| www.698263.com-黑金博时时彩计划| www.841336.com-彩妆蛋用完怎么处理| www.83600.com-彩票易中奖平台| www.092596.com-周口女方彩礼| www.229806.com-共享彩票倍率邀请码| www.637555.com-彩虹彩虹彩虹的虹| www.773631.com-彩票新用户送彩金的| www.902106.com-3d新彩吧字图迷| www.yv91.com-快三出完豹子出什么| www.98768.cc-竞彩直播即时比分| www.163248.com-彩民村心水宝典资料| www.784219.com-众彩批发市场| www.1225.cn-新快三遗漏360| www.128301.com-买彩票什么是倍投法| www.15415.com-分分时时彩前三预测| www.2552.site-吹吹七星彩-| www.76jo.com-七乐彩最新开机号| www.1839.com-今日大乐透彩民乐图| www.235719.com-竞彩360-| www.332619.com-移动梦网彩票频道| www.81221.com-福利彩票3d走势| www.05548.com-顺发彩票官方网站| www.123430.com-新昌双彩泥石流| www.256184.com-官方彩下载-| www.52wz.cc-体彩兑奖器-| www.8091.vip-五分彩官网走势图| www.863719.com-体彩5星彩查询| www.968548.com-5亿彩票哪里下载| www.er65.com-彩运8平是真的吗| www.225581.com-微信彩票女-| www.2148.vip-牛蛙彩票113| www.28235.com-娜彩快开下载| www.939981.com-找快吉林快三| www.98jd.com-新浪足彩票-| www.359756.com-寒香公主体彩断组| www.zb1.cc-江苏快三每天多少期| www.l24.com-七乐彩票是正规的吗| www.3836.in-竞彩2串1推荐| www.962251.com-最好的体彩app| www.83hs.cc-今日体彩排三字谜| www.528279.com-时时彩可以开挂吗| www.21411.cc-博汇彩票正规吗| www.mj16.com-时时彩官方计划网站| www.74566.cc-开乐彩怎么玩| www.003897.com-三彩官网旗舰店| www.126759.com-菠萝彩论坛区| www.252922.com-时时彩开奖历史| www.372579.com-吉林快三和值列表| www.855450.com-安徽福彩快三跨度表| www.942640.com-广西福彩网官方首页| www.60bw.com-腾讯分分彩定胆方法| www.3734.xyz-吹吹七星彩专区论坛| www.1079.vip-玩彩害死人了| www.216458.com-破解彩票中奖的规律| www.3097.cc-亿博大发时时彩计划| www.179193.com-河南省快三-| www.oe52.com-吉林快三代理平台| www.604681.com-中彩国际是真的吗| www.305227.com-彩票站买彩票流程| www.464507.com-体彩任九怎么算中奖| www.oe76.com-彩票走势图新浪爱彩| www.470.me-金沙彩票下载| www.695810.com-非凡彩票诈骗| www.787933.com-彩票开奖历史公告| www.857208.com-菲律宾彩票合作平台| www.913674.com-彩票游戏下载| www.963774.com-500彩票轻聊版本| PK彩票www.www.23040.com| www.he64.com-冀彩宝官网下载| www.07199.com-全民福利彩票双色球| www.fg3.com-分分彩规律技巧| www.19ki.com-泰安彩票最高奖| www.1992.cc-竞彩足球过关方式| www.027084.com-5分彩个位怎样选号| www.122749.com-众彩网骗局组织| www.260939.com-北京快三三同号遗漏| www.329985.com-2019吉林快三群| www.380578.com-苏州竞彩快3走势图| www.984269.com-二分彩规律-| www.889626.com-凤凰网彩票网址| 万利www.32123f.com| www.905291.com-高频彩票绝对赚钱| www.976449.com-福利彩票综合分布图| www.cp881.com-快三招代理-| www.152407.com-天天福彩3d-| www.yk7.com-10选5彩票骗局| www.8555.me-网络卖彩票-| www.65431.cc-青海的快三走势图| www.03zz.com-北京体彩中投注站| www.86dt.com-中国七乐彩开奖结| www.2589.cn-彩票预算-| www.753236.com-633彩票-| www.8031.vip-十字彩网址多少| www.20602.com-充值彩票送彩金| www.81182.cc-即开彩中奖-|