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.3785.top-百山东彩票群英会| www.880756.com-幸运十分彩群骗局| www.079679.com-彩票开奖方法| www.439585.com-至尊争霸彩票下载| www.r70.top-乐彩网3地-| www.js52.cc-彩票篮球火箭勇士| www.247662.com-凤凰彩票每天赚几百| www.603735.com-第二人生彩票怎么中| www.723703.com-彩乃奈奈个人简介| www.811654.com-微信彩票竞猜| www.889640.com-乐彩网最新开奖| www.970846.com-比特币分分彩漏洞| www.cp0358.com-上海快三跨度图| www.pl99.com-时时彩在线单期计划| www.056516.com-七星彩抓奖规律图| www.1927.org-福彩521前后关系| www.6111.in-怎么买国外彩票| www.853877.com-万彩动画大师破解| 易彩网www.12455k.com| www.017978.com-体彩超级大乐透| www.600098.cc-除了彩票还是什么| www.4329.biz-下载福彩在线app| www.3447.xyz-排列三彩票-| www.20112.com-深圳风采福利彩票| www.9136.loan-四川体彩金七乐技巧| www.51501.com-河北石家庄福彩自助| www.70pq.com-彩易画迷-| www.14hs.com-福建摇骰子彩票活动| www.744.cc-时时彩猜数字| www.22300.cc-下彩彩票注册送58| www.790134.com-哪个软件预测彩票准| www.507323.com-陕西福彩快十分开奖| www.679131.com-什么网站有彩金送| www.766112.com-网络能买彩票了| www.716118.com-大发彩票是否合法| www.804509.com-重庆时时彩心的| www.897212.com-18年3d彩票谜语| www.967869.com-刚力彩芽-| 幸运彩票www.444216.com| www.208451.com-七星彩开奖公告| www.313210.com-好彩网3d图谜总汇| www.301.in-1288购彩app| www.110289.com-欢乐十分钟福利彩票| www.155666.com-微彩是正规的吗| www.017102.com-跟导师买彩票骗局| www.147996.com-竞彩足球大小球技巧| www.630947.com-体彩海南飞鱼| www.275352.com-国民彩票app下载| www.407006.com-杭州体彩中心官网| www.695292.com-彩客网赛果概率分析| www.793618.com-安微省快三开奖图| www.dp55.com-哪个平台玩快三好| www.05757.cc-体彩有官方app么| www.225888.com-旺彩电脑版-| www.325570.com-福彩3d彩易网| www.729408.com-彩票达人直播平台| www.088066.com-亿彩网是正规平台吗| www.365489.com-苹果彩票一我的账户| www.534349.com-分分彩和值怎么算法| www.637891.com-竞彩公益金-| www.450064.com-彩象彩票-| www.16jx.com-七星彩彩版互换区| www.1866.win-彩票巴巴苹果下载| www.0927.vip-福彩双色球怎样合买| www.588860.cc-七星彩开什么奖今晚| www.404520.com-大白菜彩铅画教程| www.562362.com-mg游戏送彩金38| www.518521.com-中彩堂zzyzc| www.78578.cc-彩坛至尊免费大全| www.567507.com-江苏福彩下载| www.733333.com-体彩十一选五开| www.985017.com-快乐彩12选择5| www.9bk.com-超级百万彩票玩法| www.990304.com-买竞彩技巧-| www.hv59.com-吉林快三开奖号今天| www.19228.cc-安徽体彩兑奖开户行| www.58568.cc-手机中彩网安全吗| www.437385.com-福彩平台app注册| www.626057.com-玩3d彩票能赚钱么| www.799717.com-qq彩票不能买了| www.129817.com-特区彩票七星彩论| www.t22.org-7喜彩票平台| www.974160.com-网彩什么时候恢复| www.px52.com-7彩票app-| www.89oz.com-百姓彩坛香港最快| www.951502.com-qq彩票正规吗| www.cai3066.com内蒙古快三投注| www.sh64.com-43彩票-| www.59ah.com-夹芯彩钢板厚度| www.0527.bid-三d彩界独胆| www.8631.in-百宝福彩-| www.cp0508.com-快三开挂作弊下载| www.113.cc-呼市体彩中心电话| www.786523.com-360竟彩篮球| www.14zm.com-福彩幸运彩玩法| www.412159.com-体彩和福彩开奖日期| www.37662.cc-苹果彩票手机网站| www.792711.com-安阳市彩票中奖故事| www.973852.com-福彩快乐3开奖结果| www.cp28.cc-玩彩红人双胆| www.41yd.com-乐彩网首顶-| www.5979.biz-足彩最新通知| www.54314.com-二八彩下载-| www.075844.com-福建休彩31选7| www.221587.com-520彩票下载| www.384023.com-春秋彩票注册| www.318943.com-海南七星彩图片| www.974215.com-彩铅画花卉图片| www.095023.com-彩吧论坛论坛首页一| www.326591.com-新加坡福彩-| www.545208.com-用统计学推算彩票| www.151023.com-布衣天下图库多彩网| www.943406.com-老彩民投注平台| www.ks06.cc-谁有江苏快三微信群| www.082553.com-宝马彩票正规吗| www.8057.cn-创意水彩作品| www.188546.com-查一下江苏快三| www.fd38.com-福彩3d开什么号| www.543134.com-天津福彩中心电话| www.485380.com-竞彩篮球彩票大小分| www.671202.com-彩易网开奖结果| www.816159.com-双色球彩票一倍| 彩天下www.c5819.com| www.17oc.com-腾讯60秒彩的漏洞| www.8822.org-360足彩竞彩比分| www.195098.com-时彩害了多少人| www.309208.com-买彩票骗局-| www.387409.com-买彩票团队是真的吗| www.665215.com-七乐彩历史比器| www.798123.com-体彩3p天机图| www.938799.com-彩票599苹果系统| www.988876.com-江苏快三必出号码| www.cm46.com-福彩12选5-| www.100307.com-网上买福利彩票| www.788.hk-复式彩票怎么兑奖| www.4187.vip-7彩阳光大酒店几星| www.6720.vip-广东好彩36机选号| www.579496.com-雪缘足彩山分直播| www.809997.com-河南福彩网幸运彩图| www.879460.cc-内蒙古彩票中心电话| www.02602.com-ok彩票安卓-| www.71199.cc-福彩票七乐-| www.364636.com-高手预测彩票| www.466618.com-澳洲5分彩有官网吗| www.678132.com-乐彩论坛分析列表| www.950146.com-盈易福彩下载| www.nf04.com-83彩票官网-| www.125827.com-众购彩票网登录网址| www.221986.com-玩彩票app-| www.306306.cc-彩票大浪透开奖结果| www.381600.com-肥城体彩转让信息| www.501418.com-易彩云彩票客服| www.578535.com-福利彩票店好申请吗| www.649288.com-博发彩app下载| www.706891.com-凤凰彩票官网址| www.458250.com-15选5彩票的玩法| www.54846.com-福彩群-| www.28927.cc-彩票分析师陆金简介| www.246931.com-福彩开奖精彩十分| www.309048.com-彩票专家推荐| www.366454.com-高档彩票店-| www.857122.com-菲律宾博彩平台| 91彩票网www.912453.com| www.a88.vip-所有彩种计划|