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.231708.com-3d福彩过滤app| www.pk14.com-福彩3d可信吗| www.ad43.com-安徽体彩开奖结果| www.t22.top-郑州彩票-| www.088095.com-亿彩彩票是骗局揭秘| www.000332.com-神马六给彩票巧| www.4359.org-彩博士高手论坛| www.33212.cc-老版全民彩票| www.57185.com-快八彩票下载| www.133084.com-彩钢围挡安装视频| www.027741.com-大佬彩票-| www.ia51.com-35彩票害人-| www.911265.com-手机玩k彩犯法吗| www.2288.biz-做彩票的领先团队| www.03632.com-重庆七星彩骗局| www.581830.com-悟空彩票能用吗| www.692377.com-新彩票走势网苜页| www.041314.com-八八彩票官网手机版| www.666888.com-鸿运乐彩可以赢钱吗| www.273029.com-于海彩票结案了吗| www.959250.com-高德中国彩平台| www.3138.org-七乐彩旋转矩阵| www.117357.com-开发彩票平台| www.333310.com-竞彩交税吗-| www.279061.com-3d福彩天牛图库| www.580398.com-彩票弃奖故事| www.706717.com-香港亚视彩票网址| www.826537.com-白马彩票-| www.67ru.com-乐彩彩票app网址| www.566013.com-智能彩票预测下载| www.290086.com-香港彩库宝典| www.96ha.com-彩之堂官网-| www.660722.com-看福彩3d开奖号| www.751457.com-淘之家彩票合法吗| www.880368.com-彩票漏洞套利骗局| www.532375.com-彩票公式计算软件| www.22689.cc-快三赌博犯法吗| www.295600.com-快三全部买完多少注| www.112421.com-时时彩反倍投绝对嫌| www.900.gg-篮彩nba比赛结果| www.20166.cc-赢彩专家-| www.502936.com-明彩印刷厂-| www.b85.top-七星彩论坛社区图规| www.1270.tv-彩尊客户端下载官网| www.zl37.com-乐米彩票app网址| www.961887.com-时时彩单双大小规律| www.ep13.com-福彩双色球走势图表| www.35qz.com-体彩哪里能买到| www.3756.cc-七星彩牛爹资枓| www.220787.com-幸运快三破解器下载| www.362896.com-发彩网优惠券领取| www.893779.com-喜盈门彩票登录| www.bs6.cc-快三app推荐| www.e45.biz-鸿运来彩票官方网站| www.4194.cm-昆明七彩云牛乳业| www.503087.com-鸿彩直播地址| www.077909.com-福彩平台跟计划赚钱| www.342548.com-下载745好彩| www.6128.cm-福利彩票双色球买法| www.930401.com-997彩票-| www.459859.com-七星彩局王长条期| www.595819.com-f彩网是真假| www.690759.com-澳客足彩网胜平负| www.661288.com-彩票的类型-| www.cl07.com-彩票网有5分快3| www.602561.com-彩6图-| www.507897.com-福彩投注站申请| www.709343.com-琼海彩票-| www.341919.com-彩票256可靠吗| www.ue68.com-新加坡南洋彩网站| www.048618.com-3d水果图彩吧| www.689786.com-微彩娱乐安卓| www.626455.com-福彩彩票图片大全| www.763752.com-足彩app官方下载| www.843208.com-彩票公益事业| www.905082.com-武汉彩票店转让信息| www.974668.com-中华彩票手机版网址| www.tc41.com-彩票昵称大全| 九九集团www.99jtb.com| www.163973.com-彩票大底反向| www.215691.com-玩快三的网站| www.rq81.com-致富彩票网是真的吗| www.47ak.com-福彩3d幸运吗| www.0343.vip-超级时时彩缩水| www.432838.com-微彩吧官方开奖结果| www.ym43.com-今日说法彩票骗局| www.u53.com-九鼎彩票下载安装| www.44yx.cc-快三一共有几期| www.52kf.com-时时彩计划网页版| www.515965.com-2元彩票怎么中奖| www.6689.me-口袋彩票的邀请码| www.03bh.com-老9乐购福彩可靠吗| www.076080.com-天天彩票人工计划| www.568153.com-河北快三冷热| www.64478.com-彩钢瓦围挡施工方案| www.021542.com-新宝彩票平台靠谱吗| www.00109.com-章鱼彩票平台可靠吗| www.55615.com-彩站宝加盟费多少| www.362206.com-福彩3d开状号| www.593125.com-电视剧《彩虹》| www.687517.com-彩吧助手走势图势图| www.792805.com-彩票中奖符怎么用| www.885310.com-时时彩回血上岸技巧| www.956012.com-足彩比分预测软件| 盈彩www.yc7701.com| www.809371.com-彩票号码查询大师| www.898293.com-彩票代理如何拉玩家| www.974057.com-福彩刮刮卡中奖图片| 大中华彩票www.960677.com| www.ei70.com-江苏快三助手| www.769105.com-足彩任九投注推荐| www.349229.com-大乐透彩宝网| www.303730.com-怎样下载甘肃福彩| www.86019.com-铝彩板-| www.401500.com-好彩客提现真的假的| www.520936.com-体彩票投注站利润| www.588714.com-今晚七星彩什么上将| www.657367.com-七星彩缩水过滤工具| www.726209.com-欧冠购彩万博d| www.815021.com-腾讯彩票网首页| www.274.live-七星彩19026期| www.85795.com-蚂蚁正规彩票网址| www.92890.com-乐彩33怎么注册| www.752667.com-时彩平台出租价格| www.981793.com-客家妹子钟彩媚| www.bh07.cc-彩票软件开发| www.e41.loan-马来分分彩开奖记录| www.289.website七星彩中3-| www.034321.cc-nba竞彩分析| www.139881.com-彩16手机网页登录| www.0816.live-互联网彩票重启时间| www.972324.com-福彩3d一定牛下载| 爱彩乐www.372918.com| www.791411.com-排列三彩票怎么计算| www.867502.com-彩票500彩-| www.942899.com-go彩大厅注册| www.032714.com-亚洲彩票邀请码| www.361698.com-彩票网站充值追回| www.116776.com-彩乐乐杀号定胆3d| www.176129.com-快三彩票网-| www.820034.com-南国彩票开奖直播| www.906071.com-大发快三走势| www.978501.com-英皇彩票app| www.ki0.com-河南快三app下载| www.474847.com-福彩字迷图总会| www.092214.com-kc一分彩-| www.309928.com-正规玩快三的app| www.gh00.com-彩虹歌词-| 体彩网www.3890b.com| www.xx38.com-好用的彩票app| www.3029.pw-鸿运彩票在线软件| www.049.me-新加坡大彩怎么玩| www.543268.com-天天够彩票-| www.961450.com-盛大彩票登录| www.33099.com-高频彩新规-| www.84400.cc-820彩钢板-| www.97822.com-山西太原结婚彩礼钱| www.088732.com-福彩公益事业| www.141699.com-3d彩涂吧今天| www.557.cx-快三大小怎么判断| www.610420.com-福彩8加一多少钱| www.880014.com-彩票什么叫跨度| www.739018.com-福建体彩做假| www.886250.cc-秋天彩铅画图片大全|