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.85616.cc-湖北快三8200| www.789974.com-炫彩的意思-| www.885732.com-彩票开奖源是什么| www.182965.com-快三客是什么软件| www.593852.com-竞彩即时比分直| www.692306.com-泰国的彩票哪里兑现| www.798096.com-易彩网怎么下载| www.914291.com-天天乐彩官方网站| 大赢家彩票平台www.731091.com| www.3032.cm-彩票网站送彩金的| www.5374.org-福彩8加一多少钱| www.744838.com-234彩票ios-| www.733304.com-福利彩票三d字谜| www.582264.com-冠彩网是正规网站吗| www.1953.club-徐文轩说彩-| www.633246.com-篮球胜负彩怎么玩| www.3594.cn-微彩吧怎么样| www.898828.com-北京福利彩票双色球| www.796186.com-3d乐彩网胆码预测| www.28884.com-彩虹的约定串词| www.576403.com-江苏快三调整| www.913107.com-我要去彩票站下载| www.021585.com-熊猫哥彩票-| www.33539.cc-风彩还是风采哪个对| www.345064.com-棋牌彩票软件下载| www.533852.com-怎样看一分彩走势图| www.273827.com-福彩三d一注直选| www.66587.cc-六彩彩票与你同行| www.326238.com-彩宝软件下载| www.pe9.com-苹果下载彩6| www.9in.com-体彩3+1多少钱| www.058618.com-南京彩虹儿童关怀| www.157287.com-4场进球彩媒体预测| www.234357.com-80彩票是骗局| www.517023.com-1516彩票平台| www.583912.com-彩88.com-| www.653822.com-皇冠莱利彩票| www.728628.com-京东时时彩-| www.796534.com-福彩快三的开奖规律| www.868208.com-南国论坛七星彩| www.929260.com-体7星彩-| 亚投彩票www.ya717.com| www.aj7.cc-快三胆拖怎么中奖| www.99100.com-分分彩独胆技巧| www.212341.com-私彩平台都有哪些| www.663674.com-博盈彩票手机版| www.513456.com-重庆福彩合买中奖| www.054823.com-体育竞彩比分直播| www.137016.com-帮我选几个彩票号码| www.24223.com-亚洲彩票怎么样| www.90905.com-台湾好彩柠檬双爆珠| www.07vy.com-刚力彩芽靖国神社| www.876609.com-r8国际彩票骗局| www.965912.com-买彩票的心情说说| www.e62.com-足彩即时比分胜负| www.1197.net-福彩3d多少组合| www.417517.com-新足彩吧百度贴吧| www.280658.com-中国时时彩投注平台| www.395664.com-彩民社区55887| www.539191.com-体彩营销方案| www.657796.com-手机分分彩软件苹果| www.755484.com-旺彩福彩3d下载| www.849635.com-天天分分彩走势图| www.nf76.com-全民彩票破解方法| 日彩网www.rcw8800.com| www.351610.com-买彩票2注多少钱| www.466233.com-万通彩票平台| www.66793.cc-卖体育彩票的经验| www.049918.com-南方双彩网3d预测| www.154213.com-竞彩官方app| www.033607.com-帮别人时时彩下单| www.890448.com-799彩票-| www.972746.com-彩铅画花草-| www.hw3.com-彩票长龙技巧| www.d32.loan-全民智投竞彩专家| www.63zx.com-福彩男主持人广超| www.636033.com-彩6机票啥意思| www.804828.com-彩票1216app| www.0758.xyz-福利彩票注册邀请码| www.598134.com-竞彩任选九场| www.2376.cn-福彩选三开奖结果| www.385709.com-132彩票应用| www.605372.com-三d彩色打印机出租| www.037980.com-喜盈门彩票登录| www.619527.com-彩票聪明组合| www.at39.com-湖北福彩网精彩十分| www.10ow.com-大学生贷款买彩票| www.68vw.com-怎样玩分分彩才会赢| www.10991.com-中国体育体彩公司| www.48155.com-中国福利彩票图迷| www.600021.cc-为何买彩票总不中| www.sm94.com-黑客破解时时彩平台| www.25ze.com-猎人迷彩图片| www.1020.host-体育彩票心存梦想| www.29cu.com-体彩昨天开奖号| www.148683.com-时时彩为什么赢不了| www.040633.com-如意彩票网线路导航| www.153962.com-彩票团队微信兼职群| www.319331.com-福建快3爱乐彩| www.p57.pw-网络彩票提现成功| www.550389.com-全发国际彩票注册| www.668264.com-越南博彩合法吗| www.871954.com-时时彩五星缩水手机| www.963874.com-彩票店加盟的好处| www.xf.com-彩票倍投-| www.121764.com-湖南于海彩票案件| www.d49.loan-大数据可以预测彩票| www.127997.com-彩虹宝宝动画片| www.685857.com-福利彩票应用软件| www.779236.com-中彩和体育福利彩票| www.787627.com-彩票诈骗怎么判| www.9874.cc-体彩15选5叫什么| www.55341.com-时时彩五星直选大底| www.798613.com-彩虹8app彩票| www.869036.com-北京快三贴吧| www.920777.com-幸运5分彩开奖结果| www.975103.com-查一下子体彩| 博友彩www.575872.com| www.131061.com-洛阳彩礼一般多少钱| www.61988.cc-七星彩今天开奖结果| www.us98.com-彩票软件定制| www.006481.com-体彩在线客户端下载| www.137794.com-毕节彩票中奖| www.267020.com-中国体彩开奖公告| www.345891.com-双色球彩友吧式机号| www.449997.com-198彩总代官方| www.543225.com-有什么彩票网站| www.609558.com-分分彩后一计划| www.673077.com-七星彩7注一等奖| www.746706.com-河北福彩双色球| www.813908.com-网络彩票输了几百万| www.893673.com-爱投彩票苹果下载| www.953607.com-好彩香烟有几种口味| 彩乐乐www.www.3005w.com| www.150327.com-时时彩平台改号制作| www.272677.com-贵州快三当前遗漏| www.379372.com-代买彩票诈骗| www.547326.com-博发彩票怎么赚钱| www.527709.com-百乐彩色钢笔| www.25157.com-彩铅画注意事项| www.333883.cc-私彩怎么玩-| www.70449.com-福彩钱庄-| www.051992.com-彩票竞猜金豆怎么卖| www.952236.com-广东26选5好彩2| www.oz30.com-宁夏福利彩票3d| www.0239.biz-彩宝网今天开机号| www.403333.com-七彩乐的开奖号码| www.262060.com-快三软件哪个是真的| www.519365.cc-主角中彩票的小说| www.558638.com-呼和浩特体彩| www.661133.com-62彩票会员中心| www.736012.com-怎样买彩票稳赢| www.913716.com-神牛福彩双色球推荐| www.845474.com-18130期胜负彩| www.984347.com-小彩牛一用户登录| www.ec50.com-三分钟彩票骗局| www.188074.com-快三单双全天计划| www.369644.com-凤凰vip彩票计划| www.411256.com-彩神可以提现吗| www.475443.com-体育彩票交多少税| www.757556.com-福建体彩31阿四| www.627372.com-今日快三号码推荐| www.870.biz-时时彩缩水方法| www.33kn.com-云南快三一定牛|