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天

知道了
1分快三 www.690956.com-wap竞彩足球| www.856278.com-足彩专家分析| www.cp1234.com-内蒙福彩快三| www.23877.com-3d乐彩网-| www.132207.com-索要彩礼超2万| www.06106.com-体彩竞彩提成| www.73688.cc-杨毅竞彩猫收费太贵| www.47497.com-乐彩网3d试机号| www.6815.cc-18彩票网官网| www.89qd.com-u9彩票可靠不| www.911275.com-k彩下载到手机| www.3907.org-够力七星彩走势安装| www.69615.cc-易彩乐邀请码| www.0150.vip-彩色系-| www.3102.cc-上海福彩弃奖| www.036289.com-彩票自动发计划软件| www.344336.com-时时彩定位胆公式| www.495444.com-绝密彩票门户| www.738638.com-福彩输了很多钱| www.dx73.com-彩神iv靠谱吗| www.97331.cc-北京古建筑彩绘图案| www.90178.cc-七彩鱼官方下载地址| www.126142.com-手机彩票客户端下载| www.815.space-基诺彩票怎么中奖| www.3000.live-幸运彩票软件怎么样| www.701113.com-做网上赌彩赚钱吗| www.810582.com-哪个软件买彩票可靠| www.912234.com-宁海体彩店app| www.bg03.cc-网上黑彩平台| www.7bt.cc-公司年会领彩票| www.83eq.com-天下彩正版权威资料| www.8857.win-复式福彩怎么收费| www.131358.com-河南商丘彩礼血案| www.2fy.cc-买体育彩票挣钱吗| www.3628.cn-微彩排列五图规| www.673103.com-七星彩多久不能兑奖| www.669574.com-财神腾讯十分彩| www.905110.com-搜狗彩票走势大全| www.bb66.cc-福彩3d开奖号| www.186232.com-类似吉林福彩快3| www.09fl.com-306cc彩票-| www.085052.com-福彩快三苹果下载| www.693252.com-辽宁福彩正规官网| www.12894.com-举报运盛彩票| www.26115.com-彩虹羽凡-| www.50105.com-悟空彩票app| www.6269.vip-秒速时时彩助赢软件| 易彩堂www.55885j.com| www.3791.bid-七星彩韩雨轩| www.99zw.com-百度扫彩票-| www.334611.com-可以提现的彩票网| www.439403.com-彩之星站靠谱吗| www.270738.com-彩票接单-| www.365241.cc-福利彩票如何玩| www.454397.com-怎么查彩票站真假| www.596697.com-快乐彩票是真的吗| www.696785.com-下载竞彩网-| www.855786.com-彩票如何定胆| www.125720.com-中国体彩排列三| www.229730.com-大发快三内部人员| www.343987.com-彩神邀请码怎么获取| www.460123.cc-体彩杀码预测| www.595580.com-鑫彩网彩神争霸下载| www.677909.com-支付宝怎么玩彩票| www.806059.com-9817彩票-| www.891466.com-彩神计划破解版下载| www.967792.com-百合娱乐手机彩票| www.cp7732.com-福利彩票开奖结果| www.sm81.cc-彩票坐庄犯罪吗| www.11ik.com-彩票的条形码怎么看| www.178586.com-足彩500-| www.399766.com-足彩兑奖时间截止| www.530862.com-彩铅手绘花朵画| www.616743.com-福彩直选3开奖结果| www.46615.com-体彩七位数中奖查询| www.87855.cc-华阳彩票网页| www.dt47.com-彩之王app-| www.74688.cc-重庆时时彩每年停售| www.111218.cc-御彩轩下载-| www.cp0417.com-福彩河北快三走势图| www.8ln.com-凤凰极速快三网站| www.27qp.cc-万家彩票可信吗| www.930605.com-福彩3d新浪爱彩| www.vc46.com-体育彩票单式票| www.670205.com-海南地方彩票| www.829915.com-神灯彩票-| www.0419.in-精彩音乐汇歌曲列表| www.35341.com-福利彩票讨论群| www.003223.com-福彩3d藏宝图全图| www.7837.cc-福彩双色球故事中奖| www.52157.com-爱乐彩彩票官网| www.007533.com-河南省体彩中心加盟| www.883890.com-快三内蒙古开奖结果| www.667692.com-彩票案王素英| www.755416.com-彩票预测公众号| www.820922.com-彩钢板规格型号| www.889925.com-彩票标语-| www.949324.com-五福彩票苹果系统的| www.990585.com-买彩票破解器有用吗| www.df46.com-彩票平台代理| www.5092.org-中彩网怎么支付投注| www.39577.cc-中彩旧版双色球| www.002090.com-今天的福彩开奖| www.49xs.com-烟台体彩胜负群| www.4972.biz-梦见买彩票没买到| www.10795.com-竞彩十四场对阵表| www.260097.com-网赌福彩快三| www.372044.com-菠萝彩官网-| www.462379.com-久久彩票1.6.0| www.214506.com-彩票店竞彩还是亚盘| www.791049.com-福彩快乐十分改版| www.885262.com-寶利彩票-| www.25pq.com-北京华彩集团招聘| www.124858.com-迷彩免视频-| www.791121.com-彩票大师下载软件| www.076378.com-哪种彩票-| www.173333.com-极速快三有规律吗| www.258996.com-足彩单关技巧| www.61259.cc-彩99原版-| www.cai9111.com福建彩票快三一定牛| www.56598.cc-河北体彩电话| www.713693.com-赢彩彩票是正规的吗| www.51748.com-牛彩纽约登陆地址| www.932880.com-118彩票安全吗| www.tz81.com-竞彩中大奖-| www.909848.com-三d彩界王子独胆| www.r10.in-七星彩每注多少钱| www.1601.biz-足彩滚球大小球技巧| www.405896.com-七星彩资料群| www.500076.cc-狂三同人全彩本子| www.570316.com-福彩开奖结果查开| www.627789.com-中彩彩票充值没到账| www.987641.com-小米彩票官网登录| www.nx8.com-福彩快三彩票一| www.707692.com-玩时时彩赢钱心态| www.821533.com-福彩3d图总汇| www.922469.com-国家级足彩培训师| www.70wx.com-重庆时时彩牛牛走势| www.587730.com-万彩吧开奖历史| www.646322.com-福彩双色球故事中奖| www.705665.com-网易彩票怎样兑奖| www.770025.com-七彩西游记全集在线| www.841310.com-彩妆蛋怎么用| www.891567.com-彩票如何网上推销| www.947687.com-贵州体彩兑奖流程| www.983774.com-开心七星彩论坛| www.cp2.wang-分分快三预测| www.qs38.com-福彩与慈善的关系| www.m96.website黑彩举报中心| www.3608.net-微彩排列5论坛| www.048342.com-福彩7乐彩开奖公告| www.136661.com-火箭彩票app新款| www.216851.com-内蒙古快三遗漏号码| www.bu5.com-好彩一生肖数字表| www.210352.com-极速快三下载| www.678542.com-成都体彩中心| www.802149.com-省福彩中心电话号码| www.882647.com-棒棒彩票大发| www.949650.com-畅赢彩票-| www.995645.com-今日足球竞彩单场| www.uz6.com-马来三分彩公平吗| www.v22.cc-金彩国际登录| www.369993.com-酷彩lc真假辨认| www.744.me-秒秒彩怎样才能赢钱|