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天

知道了
9彩注册 www.433331.com-时时彩稳赚技巧| www.973146.com-真的彩色玫瑰| www.dk63.com-体育彩票七星彩预测| www.65ga.com-说彩网-| www.752129.com-网易彩票能提现吗| www.906275.com-非法经营黑彩什么罪| www.988519.com-中彩手彩和中彩网| www.wl9.cc-澳洲5分彩走势图| www.3849.net-胜负彩19056| www.24138.com-乐彩论坛乐彩网| www.509569.com-365彩票ios-| www.28986.cc-彩票工具万能倍投器| www.195911.com-吉林体彩网11远5| www.23738.cc-买足彩用什么软件| www.008438.com-甘肃快三豹子奖金| www.890015.com-百策富论坛彩金| www.39jk.com-体彩排列三句话| www.1699.win-彩票团队骗局| www.9047.biz-头彩网可靠吗| www.17162.com-8618彩票靠谱吗| www.81088.com-体育彩票投诉电话| www.tg77.com-快彩中奖助手漏洞号| www.6252.biz-彩八苹果下载软件| www.416693.com-安卓日本彩虹频道| www.5335.in-t星彩-| www.25599.cc-彩票断组什么意思| www.72850.com-福彩3d易点彩票网| www.031558.com-彩票推荐网站哪个好| www.122849.com-梅州体彩兑奖中心| www.017941.com-彩票站如何选位置| www.518276.com-彩球游戏教案| www.633750.com-腾讯分分彩对码选胆| www.177639.com-江苏快三隐藏规律| www.283528.com-湖北快三投注计划| www.8219.cc-澳门网上彩票哪个好| www.89400.com-粉毒跟彩毒的区别| www.358684.com-彩票数字有0吗| www.74nc.com-快三除三余数走势图| www.7113.cc-建盏养出七彩| www.38651.cc-彩运宝苹果-| www.kl47.com-彩九新版-| www.214888.cc-41彩票-| www.873970.com-ff14彩票计算器| www.965631.com-分分快三猜一个好| www.96il.com-红彩直播色情| www.622751.com-甘肃武威福彩中心| www.259215.com-彩票选号大师软件| www.92208.com-中国福利彩票好彩2| www.223414.com-5oo万彩票网| www.226688.com-福彩三d一定牛| www.9891.loan-汇丰彩票能挣钱吗| www.cp7398.com-今日湖北快三开奖号| www.42678.com-彩经网软件-| www.95752.com-中国足彩在线的微博| www.088313.cc-网络足彩单场在哪买| www.579130.com-最近彩民中奖| www.664531.com-七乐彩查询器| www.563075.com-爱米彩票官网| www.r49.bid-彩票提现账户异常| www.456831.com-体彩排三图迷| www.45eb.com-网络投彩平台安全吗| www.137148.com-苹果彩膜效果| www.252928.com-湖北今日快三推荐号| www.365221.cc-中国福建体彩网| www.468106.com-彩票指南报纸风采网| www.569590.com-福彩三d寻码图| www.t96.club-福彩双色开奖走势图| www.59db.com-彩钢瓦房屋-| www.3715.top-天空彩票与你同行| www.278363.com-彩票256旧版本| www.100341.com-乐彩网软件-| www.740321.com-足彩和福彩有区别吗| www.954207.com-88平台时时彩网站| www.cp839.cc-福快彩3下载| www.84co.com-彩票的数据怎么导出| www.191757.com-快三表格-| www.330104.com-彩搜网牛材网| www.658274.com-中彩网是黑平台吗| www.618810.com-云南福彩兑奖地址| www.727899.com-非法卖彩票-| www.868365.cc-7星彩走势-| www.991208.com-快三安徽走势图| www.qw68.cc-分分彩稳赚不赔技巧| www.902349.com-玩黑彩赔钱了| www.970006.com-彩票带单-| www.cai53.cc-吉林省快三走势图| www.212591.com-时时彩娱乐注册平台| www.354178.com-彩票投注手是干嘛的| www.002385.com-吉林快三合之图| www.865397.com-分分彩官方开奖| www.176326.com-福彩快三十分钟| www.226039.com-福建福彩网站| www.237814.com-京彩手机购彩票| www.k63.top-七天彩邀请码哪里来| www.443778.com-大庄家彩票注册| www.986.cc-我玩彩票哪个平台好| www.869299.com-够力七星彩2015| www.941281.com-中国体育彩票有哪些| 中华彩票www.9149e.com| www.657306.com-彩票游戏厅-| E彩堂www.43818z.com| www.752608.com-中国福利彩票骗人| www.830863.com-彩票平台元角分厘| www.893181.com-超级彩票助手苹果版| www.954034.com-彩票专家预测推荐| www.996575.com-新天天彩下载| www.be55.com-内蒙古福彩中心招聘| www.te83.com-时时彩技术分享| www.02zk.com-彩虹伴奏周杰伦女生| 天朝彩票www.cz5658.com| www.zy43.com-福利彩票新浪爱彩| www.535575.com-买彩票有几位数| www.613385.com-u9彩票是哪个网址| www.681276.com-三b天天中彩吧| www.757210.com-二手工地彩钢围挡| www.1106.in-足彩怎么买中奖率高| www.203131.com-福彩3d开奖走式图| www.961474.com-体彩助手扫描二维码| www.bb40.com-彩票代理市场收集| www.ys56.com-吉林福彩举报电话| www.13vv.com-福彩3d迷语-| www.667629.com-打彩球的游戏| www.268450.com-众彩网北京赛车| www.015822.com-中国彩票十分钟| www.779947.com-彩票六加一开奖结果| www.370865.com-新彩技法-| www.yj7.cc-皇都彩票用户注册| www.058758.com-彩神pk10手机版| www.111266.cc-福彩交流群微信| www.072551.com-六亿彩票网址| www.397910.com-网上购彩票官方网站| www.77676.com-彩票老店主今日推荐| www.12224.cc-福彩六加一怎么买| www.426761.com-彩票站挣钱么| www.v02.cc-南方彩票走势图| www.333281.com-玩彩秘诀-| www.055844.com-安徽快三和值速表| www.183073.com-大发快三走势图官网| www.751273.com-彩票条形码撕坏| www.816730.com-时时彩漏开怎么回事| www.872936.com-遵义桐梓彩票店转让| www.924066.com-买彩票机选能中奖吗| www.969348.com-上海快三三不同遗漏| 500彩票www.500823.com| www.fu89.com-彩票快三-| www.0244.loan-众乐彩票骗局| www.110665.com-彩票春节后几号开始| www.332710.com-爱彩乐怎么登陆不了| www.502965.com-亚洲彩靠谱吗| www.310423.com-安徽体彩网十一| www.198042.com-福彩新快3微信| www.933201.com-私彩开奖原理| www.vr51.com-必发彩票开奖网| www.0436.tv-95彩网信誉怎么样| www.09547.com-105彩票本地应用| www.076133.com-红旗彩票官方| www.949573.com-盈彩国际彩票| www.981952.com-9彩娱乐平台| www.345992.com-爱投云彩app下载| www.603805.com-大数据足彩-| www.334243.com-幸运星座彩票玩法| www.3so.cc-做彩票软件销售| www.208591.com-福彩3d布衣图1| www.922260.com-365彩票提现不了|