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.689628.com-山东福彩晓艳七乐彩| www.868244.com-uk彩骗局-| www.974027.com-神话彩票-| www.76zm.com-重庆彩票站申请电话| www.187718.com-快三网址是多少| www.118993.com-万博彩票是真的吗| www.497714.com-竞彩中奖规则| www.885444.com-山东云彩宝彩票下载| www.76662.com-五k彩票网-| www.099994.com-百宝彩票481| www.388626.com-福彩时时彩玩发视频| www.706538.com-嘉兴体彩招聘| www.858596.com-竞彩二串一套利| www.377570.com-合肥福利彩票开店| www.577168.com-好彩投app下载| www.414590.com-彩富人生安全吗| www.543225.com-有什么彩票网站| www.665223.com-查看七乐彩历史记录| www.834429.com-炫彩夺目的意思是| www.33kv.com-九万彩票下载地址| www.6630.biz-腾讯分分彩五码公式| www.8396.org-七星彩买礼物| www.ar14.com-内蒙快三投注技巧| www.3879.in-彩金黄金哪个好| www.200068.com-中国手机彩票网| www.079653.com-复式彩票选号| www.285872.com-湖北快三牛预测| www.333185.com-彩票怎么查-| www.5029.biz-福利彩票是怎么买法| www.385668.com-地下六仺彩开奖网站| www.jf44.com-快三推广-| www.h24.shop-彩吧助手试机号| www.56nx.com-博友彩是正规的吗| www.994148.com-炫彩之剑-| www.33576.com-上海福彩快三赚钱吗| www.14236.com-体彩全运彩一定牛| www.887759.com-靠谱的彩票投注软件| www.963364.com-国外彩票代购平台| 网易彩票www.596709.com| www.523159.com-62官方彩票-| www.59lu.com-竞彩足球赔率| www.7134.biz-七彩假期电话| www.668778.com-讯飞彩票骗局| www.1887.vip-香港中彩堂安装| www.6851.biz-彩票密籍-| www.64lv.com-双色球彩蝶霜飞| www.8455.in-福彩3d11和值| www.182618.com-北京快三和值中奖| www.327713.com-快三试机号-| www.cai8011.com新手怎么买体育彩票| www.088690.com-福彩通是真是假| www.80gb.com-福利彩票五行走势图| www.6448.me-彩票58-| www.42588.cc-中彩网是什么| www.n33.top-爱乐透彩票哪里充值| www.81kh.com-竞彩足球双平高手| www.661756.com-彩app28-| www.562827.com-6161彩票-| www.581946.com-彩八仙ios客户端| www.634.live-十分彩网下载| www.055235.com-沉迷彩票人的心理| www.366872.com-福利彩票效果图| www.6560.cm-彩票站过期-| www.588146.com-福彩三d综合图| www.991231.com-肥强竞彩12课堂| www.1582.wang-彩票收藏论坛| www.080713.com-中信彩-| www.313366.com-双彩网论坛论坛| www.087263.com-深圳福田彩福大厦| www.290028.com-今晚七星彩预测号码| www.108644.com-彩票概率论-| www.232625.com-体育彩票分析| www.5555.shop-彩影免注册版下载| www.ye73.com-手机上买快三可靠吗| www.38xo.com-彩票3d走势图综合| www.1268.win-福利彩票三地开奖| www.512340.com-彩铅画古风女子| www.92mp.com-078彩票黑-| www.137.win-放彩虹屁的表情包| www.5206.wang-福彩申请流程| www.9959.cm-青海省彩礼排名| www.166976.com-福彩手机投注| www.296976.com-三宝乐购彩票合法吗| www.092670.com-竞彩二串一稳赢表| www.544918.com-新淘彩是黑平台吗| www.780422.com-大片樱花树彩铅画法| www.863819.com-159彩票网下载| www.951433.com-信誉大的彩票平台| 500彩票www.26299j.com| www.7497.pw-够力七彩长条奖表| www.345638.com-彩神称霸lll| www.309578.com-吉林省彩票官网| www.564727.com-体彩店主要什么赚钱| www.j17.me-福彩快三今日走势图| www.780986.com-彩虹哥是骗子的证据| www.875186.com-区块链彩票app| www.974945.com-彩票查询大乐透预测| www.cp919.cc-全部快三下载| www.75775.com-腾讯分分彩玩法介绍| www.00633.cc-德甲足球竞彩网| www.306666.cc-时时彩定胆除32| www.474801.com-百盛彩-| www.566915.com-二四六好彩免费资料| www.675503.com-彩票站连连看| www.783706.com-105彩票首页| www.905026.com-彩票网333-| www.3339.online体育彩票高频走势图| www.fh45.com-百盈快三六六顺彩票| www.d68.club-网络彩票网址大全| www.31zo.com-彩虹宝宝在线观看| www.303014.com-福彩三d走势图表图| www.ev63.com-查彩票-| www.3es.com-热购彩票能提现吗| www.01642.com-彩票网站制作费用| www.77912.com-以彩开头的成语| www.ay95.com-江西电脑福利彩票| www.82xg.com-百度双彩论坛| www.030681.com-体彩七星彩论坛| www.181095.com-今日中彩正规吗| www.598281.com-体彩第19022期| www.sb29.com-腾讯时时彩是官网吗| www.5446.in-福彩太湖3d字谜| www.005890.com-500彩票苹果版| www.929032.com-旺旺彩票能玩吗| www.me80.com-彩乐糖果-| www.6ho.com-好运来分分彩软件| www.34412.com-大众彩票网pk10| www.874228.com-今晚彩票开机号| www.961102.com-快三大小单双计划稳| 500彩票www.887771.com| www.924802.com-福彩体彩彩票开奖查| www.js65.com-体彩屋安徽快三| www.542690.cc-中国福彩3网| www.654847.com-买彩票都是假的吧| www.786981.com-竞彩4x11-| www.907771.com-合肥市福彩中心地址| 顺丰彩票www.sfk3.com| www.145336.com-彩神网页版登录入口| www.40009.com-关于体彩app兑奖| www.84795.com-福彩3d大兵全版| www.035056.com-至尊彩为什么没人管| www.891115.com-彩票qq交流群号码| www.995839.com-彩票刷水-| www.kq07.com-内蒙古快三开奖全期| www.965524.com-快三每天多少期| 500彩票www.316477.com| www.025061.com-智慧彩票准吗| www.307561.com-彩38下载官方网站| www.450072.com-爱赢彩彩票app| www.586718.com-送彩金平台客服| www.571213.com-湖北快三过滤| www.237523.com-足彩比分竞猜| www.315618.com-重庆时时彩官方投注| www.413963.com-喝彩人的意思| www.1673.wang-七乐彩助手-| www.50xq.com-大琼鲸彩票开奖查询| www.9905.online四川福彩中心电话| www.925110.com-新快三开奖结果查询| 全民乐彩票www.2934l.com| www.293630.com-江苏福彩体彩| www.592018.com-快三和值13-| www.677039.com-彩色包装盒厂家| www.774658.com-七乐彩复式选号| www.857815.com-竞猜足彩比分计算器|