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.872469.com-五省快三基本走势图| www.18qt.com-足彩19007-| www.565217.com-毒药独胆福彩今天| www.743210.com-燕赵福彩快三开奖| www.884626.com-彩票历史数据与预测| 凤凰彩票www.77802l.com| www.040798.com-博彩打水套利| www.207049.com-易彩彩票网登录| www.574338.com-国外数学家买彩票| www.275644.com-福建快3爱彩乐| www.921009.com-全球彩票网址是什么| 全民快乐8www.qmkl0.com| www.7305.vip-彩虹六号怎么玩| www.57267.cc-锋彩直播苹果版本| www.089452.com-足彩计划单app| www.286154.com-江苏快三怎么玩豹子| www.790987.com-好彩烟蓝-| www.122070.com-体彩胜负彩开奖| www.743581.com-彩票万彩吧-| www.846046.com-彩票拖胆什么意思| www.559729.com-家彩开奖开机号| www.79jk.com-时时彩两期推波方法| www.299189.com-福利彩票数字三玩法| www.483817.com-足彩让球是什么意思| www.001237.com-下载体彩app送| www.909548.com-今天福彩三d布衣图| www.979672.com-彩票站赊账合法吗| www.bl57.com-宝利彩票app下载| www.wz46.com-彩经网预测-| www.62rs.com-爱彩乐投注技巧| www.03fl.com-手机版的彩票k线图| www.474155.com-福彩3d073期| www.577501.com-七星彩能全国兑奖| www.666581.com-买彩票输了3万| www.755600.com-三d彩绘机-| www.855846.com-海南七星彩打什么码| www.949813.com-首充彩票-| 易彩网www.12455f.com| www.ze46.com-甘肃福利彩票投注站| www.488066.cc-博发彩票坑人| www.297617.com-甘肃省体育彩票十一| www.67va.com-鸿奇彩票靠谱吗| www.007386.com-腾讯彩票安卓版下载| www.219364.com-福建体彩彩民论坛| www.10nr.com-时时彩票怎么下载| www.cp1719.com-幸运快三预测分析| www.238475.com-四川福利彩票官网| www.190521.com-e球彩奖金参照表| www.130910.com-彩礼钱的伤感句子| www.20ik.com-九彩僵神txt| www.91lm.cc-牛彩官网3d断组| www.024380.com-乐彩客彩票下载| www.795090.com-新加坡五合网彩图库| 大赢家彩票www.5086w.com| www.47tz.com-开一家福利彩票| www.802799.com-198彩注册平台| www.993862.com-胜负彩玩法介绍| www.jj10.com-彩易福彩3d字迷| www.341342.com-经典微信彩票群名称| www.443447.com-亚博彩票充值| www.546969.com-国家彩票整改落实| www.95871.com-广西快三三同号遗| www.062693.com-河内一分彩开奖号码| www.160546.com-北京福彩赛车| www.26947.com-新浪彩票最新版| 彩票坊www.022i.cc| www.9118.cm-福利彩票39期| www.75657.com-飞鱼彩票输了很多钱| www.254471.com-快三两不同号技巧| www.422813.com-大乐透彩民乐图吧| www.17457.com-中国足彩五大联赛| www.224295.com-百盈快三免费计划| www.36846.com-好运来彩票投注平台| www.209938.com-大发快三的网站| www.958314.com-福利彩3d怎么买| www.f45.club-体彩中奖号-| www.98758.cc-竞彩365直播| www.130150.com-七星彩局王图纸| www.187295.com-网上时时彩是骗局吗| www.953341.com-竞彩预测推荐| www.cai2818.com广西快三形态走势图| www.ni34.com-足球500网胜负彩| www.18ku.com-金沙送99彩金| www.86se.cc-彩票官网app下载| www.2325.cm-山东好彩快3| www.s32.net-福利彩票.com| www.70ri.com-重庆时时彩下载安装| www.2778.in-手机版粤淘彩票| www.8642.vip-中乐彩app-| www.34081.com-彩票计划聊天室源码| www.745977.com-彩43网站-| www.867112.com-分分彩算号-| www.969667.com-体彩三五d-| www.cai8001.com快三公式-| www.lw78.cc-大发时时彩怎么玩法| www.2pm.cc-彩客007下载| www.188582.com-038彩票官网| www.82tx.com-彩票绝密算法| www.2719.pw-体彩湖北十一选五| www.av81.com-体彩排列三开奖号| www.17si.com-体彩苏宁智慧门店| www.4227.cm-福星彩即时开奖结果| www.679.cc-百事彩票-| www.6928.top-七星彩抓规神器| www.818482.com-新浪竞彩投注| www.nw34.com-竞彩官官网-| www.57759.com-星彩娱乐下载| www.012527.com-海南体彩开奖结果| www.090155.com-各种彩票代理| www.026684.com-辉煌彩票咋样| www.260007.com-宁夏福利彩票中奖| www.332304.com-买彩票要多少钱一张| www.413833.com-彩之云理财安全么| www.533055.com-彩票实战讲座四| www.591716.com-七星彩单双走势图| www.667231.com-跑马彩票开奖结果| www.731372.com-易彩堂网-| www.801135.com-彩71彩票官网| www.889728.com-解密牛娃彩票| www.318425.com-彩票开奖双色球单式| www.459758.com-体彩排列3d断组| www.593697.com-七彩国际影城怎么样| www.678073.com-彩票转让信息| www.790371.com-杏彩官网注册地址| www.883567.com-奔驰彩票是合法的吗| www.973263.com-彩虹岛免费接单平台| www.xe18.com-福彩和值跨度表| www.369320.com-掌上彩票手机版下载| www.746711.com-燕赵福彩网排列五| www.876755.com-福彩七乐彩几点封机| www.9312.org-体彩福彩中奖号| www.88945.cc-皇帝彩票资金安全吗| www.671971.com-体彩19041期| www.812159.com-3d福彩贴吧-| www.420030.com-即开型彩票中奖编码| www.522239.com-五分彩万位计划| www.581635.com-中园体育彩票网站| www.660248.com-ai彩预测-| www.800707.com-购彩平台哪个好| www.866243.com-下载网彩-| www.919541.com-彩票app可以租吗| www.970304.com-福彩三d试机号儿| www.cai3906.com体彩快3-| www.lq25.com-中彩网网站-| www.j48.xyz-双色球手机牛彩网网| www.118604.com-彩票炒群话术怎么说| www.79764.com-竞彩足球稳赚概率| www.034666.com-花生彩票能玩吗| www.59264.com-梦删解梦七星彩大全| www.365626.cc-足彩任九胆拖计算器| www.345619.com-武汉福彩三d| 13e彩票www.178075.com| www.231250.com-连中彩票下载| www.624747.com-香港彩富网48cf| www.855560.com-林兴洛福彩3d| www.978123.com-彩钢道路围挡| www.ti68.com-k彩福地测速| www.13wr.com-快三输钱太快了| www.30657.com-新浪爱彩走势图大全| www.055996.com-福彩开奖几位数有奖| www.230263.com-玩快三输了一万多| www.411559.com-竞彩推荐哪个靠谱| www.110715.com-够力七星彩解梦码| www.410466.com-彩票代打套利|