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.uj23.com-3d走势图中彩网| www.359685.com-彩乐汇时时彩平台| www.472379.com-迪士尼彩乐园168| www.585149.com-体彩彩票店门面转让| www.666139.com-下载乐透啦彩票| www.95pr.com-空银行卡代刷彩票| www.3118.pw-体彩专管员考试试题| www.8729.pw-足彩票app下载| www.662008.com-竞彩中奖票-| www.1664.biz-七乐彩怎么选号| www.1682.net-彩票交流网-| www.115968.com-彩票追加与加倍| www.239856.com-王者彩票赚钱吗| www.502367.com-手机上吗时时彩助手| www.646424.com-章鱼彩票怎么提现| www.712822.com-星彩月英孙尚香无惨| www.246537.com-官方全民彩票软件| www.358400.com-彩票中大奖在哪领| www.467822.com-体彩网黑龙江新闻| www.576014.com-如意彩票官网app| www.662233.com-乐8网彩票是真的吗| www.748140.com-977彩票下载| www.965415.com-福彩极速3d-| www.pf1.com-彩6com-| www.2qz.cc-金利彩票是干啥的| www.04499.cc-能提现到微信的彩票| www.291855.com-福彩网快3官网| www.812078.com-乐彩论坛彩票预测| www.am45.cc-购买双色球彩票网站| www.346455.com-明代红绿彩瓷器| www.383389.com-邪恶道日本彩口子| www.518915.com-滴滴彩票客服| www.668911.com-七星彩怎么看中奖| www.997404.com-福彩快乐二十分| www.249.cn-福彩双色球几天一期| www.964861.com-海南福利彩票| www.182602.com-快三开奖结果宁夏| 大赢家彩票网www.54400w.com| www.lb85.com-288彩票app-| www.62.biz-80彩票可以提现吗| www.452558.com-陈官体育彩票位置| www.756354.com-全民彩票旧版本| www.025805.com-淘宝彩票官网首页| www.516189.com-彩票网0800-| www.131334.com-四川各地彩礼价目表| www.100065.com-彩39彩票-| www.731963.com-河北各地彩礼价格表| www.807236.com-温州福彩申请| www.931230.com-马来西亚褔利樂和彩| 盈发彩票www.99yfa.com| www.tt66.cc-足彩网上可以买吗| www.46kx.com-黄金叶七彩爆珠| www.0772.in-送彩金70-| www.6629.cm-竞彩篮球现金投注| www.505848.com-吉林快三封盘时间| www.857530.com-彩票中5个号多少钱| www.969180.com-海南天天中彩票| www.fb13.com-乐点大发时时彩| www.307218.com-贵州快三的开结果| www.216137.com-快三网上押注| www.585300.com-欧洲时时彩开奖记录| www.685063.com-福彩走势和制图搜索| www.775024.com-网上快3彩票违法吗| www.884423.com-甘肃福彩开奖信息| www.981918.com-买大发快三的技巧| www.aa36.com-体彩481开奖查询| www.vn91.com-甘肃快三和值图| www.369845.com-足彩封盘-| www.466477.cc-竞彩机-| www.898905.com-快三网上赚钱| www.123277.com-七彩奖开奖直播| www.239112.com-河北快三夸度走势图| www.434513.com-网易湖北快三走势图| www.861241.com-高频彩历史开奖查询| www.956301.com-以感情名义骗彩票| 500彩票网www.61655h.com| www.7803.vip-竞彩输钱压抑| www.41616.com-彩神彩票网专业版| www.289746.com-体育彩票开奖r| www.fg47.com-彩票平台赚返点| www.798671.com-88时时彩网-| www.126481.com-王者彩票2-| www.142277.com-福彩双色球机选一注| www.967584.com-迪拜彩票在哪里买| www.cx99.com-彩票平台搭建一条龙| www.tz00.com-福彩最佳广告语| www.797105.com-凤凰2彩票-| www.892517.com-彩票榜平台-| www.550357.com-火星彩票下载| www.656106.com-星彩自助下单| www.759815.com-时时彩宝典app| www.317108.com-幸运十分彩-| www.388937.com-福彩姜子牙复式图| www.502375.com-kk彩票靠谱-| www.568605.com-彩薇花化妆品官网| www.650369.com-彩虹伞歌谣-| www.717985.cc-中国体彩报左木预测| www.747739.com-好友游戏彩票注册| www.946893.com-福彩三d开奖结结果| www.qw2.cc-请把福彩三的早出来| www.075098.com-福利彩票有哪些类型| www.523773.com-918彩票网站| www.509750.com-博彩接口怎么接入| www.585501.com-乐彩大乐秀走势图| www.651706.com-中国福彩一倍多少钱| www.725555.com-私人的体彩赌| www.594.cm-亚投彩票平台图片| www.6078.biz-足球500万彩票网| www.10375.com-今日足彩唯彩推荐| www.384501.com-彩688下载-| www.592459.com-万亿团队彩22平台| www.786233.com-华盛娱乐购彩平台| www.895636.com-世界杯足彩几种玩法| 大赢家彩票网www.178739.com| www.965055.com-彩七七下载-| 众发彩票www.316546.com| www.678313.com-彩摘网牛彩网彩摘网| www.kn54.com-精彩十分彩票| www.e46.xyz-乐和彩下载-| www.7rc.com-员工年会彩票中大奖| www.033273.com-网上帮人投注彩票| www.773539.com-胜负彩百度贴吧| www.55389.com-时时彩盘子怎么做| www.434348.com-福利彩票的营销计划| www.551922.com-王者彩票下载安装| www.71934.com-富民彩票下载| www.38853.com-993彩票软件| www.33022.com-中国体彩投诉电话| www.90494.com-谁知道76平台彩票| www.758101.com-福彩双色球奇葩号| www.551318.com-竞彩四场进球彩| www.677701.com-怎么计算快三和值表| www.962145.com-彩涂钢板厂-| www.9356.org-福彩开奖有假吗| www.382852.com-博盈彩票下载安装| www.518177.com-苹果手机炫彩灯光| www.111601.com-彩票兼职赚佣金| www.683250.com-彩票押50万-| www.776527.cc-时时彩什么叫组三| www.843381.com-福彩公益玩法| www.900075.cc-发彩网彩票资讯频道| www.951716.com-彩票稳赚的买法| 亚洲彩www.68568w.com| www.37866.cc-彩77彩票安全吗| www.aj05.com-七星彩走势图表2元| www.59551.com-排列五奇偶走势图彩| www.779639.com-福彩3d定位技巧| www.897162.com-时时彩长龙判断| www.967535.com-彩票计划群被骗经历| www.cai2121.com银川福彩快三走势图| www.344654.com-下载彩票网站| www.417800.com-盛大彩票网站| www.509658.com-烟台市彩票兑奖地址| www.661879.com-足彩七串八-| www.231791.com-乐彩彩票app下载| www.765033.com-彩票平台源码什么好| www.175171.com-大发快三有什么规律| www.8683.xyz-体彩七星直播| www.3093.vip-成都福彩外围| www.789672.com-彩票平台源码购买| www.563835.com-易记彩票网站| www.677742.com-微彩娱乐28-| www.760379.com-彩票发财口号| www.122402.com-怎么加时时彩群|