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.mj37.com-网络彩票提款被拒| www.914723.com-体彩乐彩网开奖号| www.0720.xyz-国家彩票整改落实| www.08460.com-彩票平刷方法| www.40886.com-一号店彩票官网| www.173227.com-甘肃快三对子预测号| www.848516.com-足球比分唯彩| www.798886.com-足彩让球胜平负查询| www.883490.com-送彩金彩票网站推荐| www.954984.com-黑彩什么意思| 亿彩堂www.87668s.com| www.jw39.com-老版彩库2015| www.092182.com-买彩票有年龄限制吗| www.188241.com-电脑亚洲彩票| www.259901.com-福彩兑奖流程| www.239997.com-彩神xapp软件| www.326351.com-彩宝网大乐透| www.945567.com-体彩顶呱刮7中奖率| www.we.com-手机购彩app下载| www.31389.cc-葡京彩票网址| www.972342.com-排列三走势图彩宝贝| www.sf6.com-吉林快三是啥意思| www.tb31.com-时时彩中奖-| www.964375.com-新2彩票网站| www.ui1.com-百宝彩票网手机版| www.020697.com-快三杀号的计算| www.961648.com-11进5是哪种彩票| www.791131.com-彩票模拟选号| www.921949.com-新版彩神时时彩| 福彩彩吧www.61524s.com| www.lp89.com-彩经网客户端| www.8403.cc-网易电脑版彩票网| 爱彩www.004ac.com| www.545593.com-怎么推广彩票| www.386129.com-江苏体彩7位| www.539770.com-体彩双色球开奖时间| www.310304.com-手机购彩平台哪个好| www.63799.cc-福利快乐彩胆拖玩法| www.918015.com-统一彩票官网| www.734529.com-彩票风控部门审核| www.7749.tv-华亿彩票是干什么的| www.28356.cc-镇江市体彩中心网站| www.168994.com-上海福彩时时乐| www.59000.com-幸运五分彩走势图| www.021287.com-最安全的私彩平台| www.099524.com-乐趣彩票是黑平台么| www.014630.com-海南七星彩版| www.153616.com-福彩预测双色球| www.254829.com-体彩任选三-| www.033988.com-七乐彩网站合法吗| www.gp49.com-最新退彩礼案例| www.56352.cc-大富彩票网怎么样| www.984779.com-手机彩票可信吗| www.pa75.com-取消彩票高频游戏| www.794721.cc-爱购彩app下载| www.2514.vip-澳门最新的彩票| www.100193.com-878彩票网站| www.605928.com-吉祥彩票怎么赚钱| www.929432.com-福彩8首页-| www.b85.pw-彩投什么意思是什么| www.806640.com-大小骰宝彩票咋玩| www.888010.com-周公解梦七星彩号码| www.967727.com-买彩票输5万| www.sm5.com-彩种怎么玩-| www.zn06.com-大发快三破解| www.28ex.com-安卓下载491彩票| www.3172.me-新看彩啦-| www.911736.com-福彩3d怎么打| www.cai4788.com湖北快三综合走势| www.397183.com-红旗彩票首页注册| www.268256.com-福彩精彩十分推荐| www.119212.com-凤凰彩票刷钱| www.934788.com-台码福星彩开奖结果| 九八彩票www.585868.cc| www.76988.com-我找体彩百度贴吧| www.9226.cm-天天彩报1彩吧图库| www.094099.com-福彩3d在线过滤| www.110426.com-福彩3d大小怎么买| www.840036.com-pc蛋蛋彩-| www.80220.com-河北快三近50期| www.774911.com-快三如何买比较好| www.842786.com-天天快三开奖结果| www.936488.com-流沙溢彩-| www.981728.com-双色球彩票作假事件| www.cp975.cc-买快三神器-| www.no61.com-福彩宁夏快三电子版| www.k10.tv-玩快三坑钱了| www.44bn.com-高频彩是啥-| www.11ml.com-奥门48彩-| www.92iu.com-彩票车是什么| www.885106.com-有玩同乐彩票的吗| 彩多多www.78949p.com| www.949730.com-160彩票下载安装| 万利www.32123b.com| www.629705.com-幸运彩票规律| www.799728.com-彩票中奖都是命| www.026523.com-高频彩票概率学| www.393840.com-彩虹世界破解版下载| www.021925.com-澳门时时彩靠谱吗| www.000765.com-千万福彩-| www.7337.org-7号彩虹电池容量| www.660.cm-彩店宝彩票手机软件| www.98vh.com-内蒙福彩微信公众号| www.085701.com-派彩电子官方网站| www.77217.cc-105彩票负面新闻| www.691653.com-彩乐乐排列5预测| www.762978.com-福利彩票连环夺宝| www.820062.com-镇上可以开彩票站吗| www.881297.com-腾讯分分彩胆拖计划| www.937289.com-神彩福牛双色球| www.978505.com-淘宝福彩线上投注| 500万彩票www.855312.com| www.89967.cc-七星彩在线模拟摇号| www.624.hk-北京时时彩计划预测| www.9596.cc-色彩的冷暖-| www.1554.vip-体彩7位数中奖信息| www.280798.com-时时彩官方平台| www.71613.cc-注册赠送彩金| www.91ps.com-悟空彩票平台怎么样| www.96829.com-龙山彩票站-| www.6580.vip-聚鑫彩-| www.21su.com-状元彩票网app| www.324288.com-国家福利彩票主任| www.055810.com-快三全天助赢计划| www.138084.com-3d福彩图库-| www.210416.com-黑彩如何定罪| www.270257.com-421彩票-| www.782010.com-中彩票八字案例| www.845205.com-竞猜型体育彩票种类| www.989229.com-彩票中奖后去哪缴税| www.ha97.com-微信高频彩骗局| www.127544.com-彩虹六号正版下载| www.270717.com-彩77苹果下载| www.937488.com-微彩是骗局揭秘| www.499189.com-彩票复试是什么意思| www.310563.com-八号彩久彩票| www.13524.cc-足彩复式价格| www.0959.com-跟单买彩票-| www.lf10.com-306官方彩票安卓| www.769688.com-好彩彩票ios| www.840816.com-彩票中奖支票图片| www.922937.com-万人龙虎彩票| www.978915.com-河南快三怎么追号| www.ag47.cc-双色球走势图彩宝贝| www.nu69.com-彩票随机买能中奖吗| www.387780.com-华彩的含义-| www.48119.com-海南七星彩局王奖表| www.313819.com-足球竞彩胜平负| www.413141.com-五分彩真的能赚钱吗| www.522107.com-手机版博悦分分彩| www.622095.com-五福彩票普通版本| www.983928.com-福彩天吉预测| www.zl49.com-500万彩票走势图| www.16bi.com-彩虹6号围攻手机版| www.86ys.com-大发快三真的假的| www.785797.com-特区南国彩票七星彩| www.323162.com-乐和彩票app| www.402997.com-吉鑫网彩票-| www.499666.cc-彩票高级师培训班| www.559639.com-陇彩宝在哪里下载| www.pt16.com-彩票app举报| www.1882.me-万彩资料大全| www.617765.com-体彩中心历任主任| www.038335.com-779彩票平台网址|