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天

知道了
58福彩 www.618901.com-明天开彩票吗| www.975848.com-林州彩礼价目表| www.567164.com-彩虹6号季票价格| www.22dh.com-彩票开奖源代码| www.64594.com-彩票推荐詹天佑| www.022010.com-彩票坊合法吗| www.161525.com-体育彩票下期预测| www.484468.com-网易彩票改名人人中| www.37bg.com-福彩双色球哪天开奖| www.6088.in-永盛彩票网靠谱吗| www.69984.com-有玩时时彩赚钱的吗| www.14zl.com-快彩王推荐代码| www.115381.com-彩钢瓦图片-| www.356438.com-彩票充10-| www.2kw.cc-彩票店利润怎么结算| www.510117.com-体彩店举报电话| www.113033.com-大众国际大众彩票| www.pd85.com-燕赵福彩-| www.153896.com-体彩排列五玩法说明| www.720788.com-福利彩票新出游戏机| www.28dc.com-手机投注七星彩| www.7411.com-福彩3d之家公益站| www.584479.com-中国彩吧论坛着页| www.79902.com-快购彩平台-| www.091698.com-甘肃快三倍投计划表| www.456588.com-巴厘岛彩票注册| www.182865.com-中国竞彩网比分直播| www.7624.xyz-新浪爱彩用不了| www.977779.cc-世界杯足彩暂停销售| www.7878.pro-江苏快三大小预测| www.305606.com-王百万买彩票牛牛| www.502470.com-女生说在投资彩票| www.731622.com-彩票最佳网投平台| www.903474.com-赢彩吧靠谱吗| www.ud27.com-419cc彩票-| www.225570.com-探探好多彩票托| www.528879.com-095彩票网下载| www.673693.com-彩绘包袱图片| www.026734.com-交友平台骗女孩博彩| www.752283.com-3d彩票高手-| www.fr70.com-福彩快三技巧视频| www.x13.com-南方双彩p3试机号| www.072595.com-支付宝能买彩票吗| www.217654.com-五星彩票下载| www.351446.com-你们身边有中彩票吗| www.517422.com-排列3双彩论坛| www.953517.com-中国竞彩奖金计算器| www.jj53.com-大发快三正规平台| www.169955.com-福彩35期开奖结果| www.303908.com-关于鑫彩网-| www.405239.com-山东彩民3亿元巨奖| www.96il.com-红彩直播色情| www.23569.com-红旗彩票官方网站| www.405722.com-518彩票诈骗手段| www.986098.com-今日足彩竞彩预测| www.001649.com-釉彩专业毕业去向| www.377953.com-彩虹6号腾讯手游| www.0757.win-河北体彩竞彩| www.84699.cc-光明全天时时彩计划| www.137555.com-中国体彩报电子报| www.791427.com-湖北彩票近期中奖号| www.ci16.com-合肥快三查询| www.221.cx-三彩丽雪羊绒大衣| www.9164.cn-七乐彩一等奖中奖地| www.137819.com-尊彩网下载-| www.886628.com-彩网站-| www.xg90.com-6000彩票app| www.82mx.com-福利彩票长治一等奖| www.705052.com-英发彩票-| www.841115.com-化妆品彩妆店铺名字| www.976846.com-2018德州彩礼钱| www.80954.com-秒秒彩即时开奖彩票| www.138484.com-鸿辰国际超级福彩| www.252872.com-时时彩开奖走势图| www.52743.com-七彩西游记在线播放| www.038643.com-黑龙江福彩22| www.538095.com-中国福彩有几种彩种| www.02224.cc-搜狗彩票彩种| www.444897.com-未央福彩转让| www.600427.com-58彩票互动大厅| www.8rk.com-搭建时时彩平台多钱| www.794806.com-福彩3d百万大奖| www.7079.cn-汇彩网是黑平台吗| www.80386.com-安徽快三投注站| 福彩www.26878x.com| www.811987.com-新加波天天彩资讯纲| www.040068.com-宝马彩票是个黑网站| www.343442.com-78彩票怎么注册| www.22867.cc-潮信买彩票安全吗| www.484448.com-福彩3d囹迷草原狼| www.659794.com-快购彩票软件下载| www.158986.com-福利彩票是机号| www.5937.com-体彩三有返奖吗| www.84589.com-快三分析app| www.663519.com-百度彩票关闭了吗| www.804300.com-网络体彩-| www.936759.com-七乐彩复式中奖查询| www.933322.com-彩票工具软件| www.cp8758.com-uu快三骗局-| www.59dp.com-体彩兑奖地点不同| www.5533.site-足彩加推荐怎么样| www.427006.com-彩民周刊报纸答案| www.xq02.com-11选五彩票专业版| www.744901.com-彩票管理新规| www.734318.com-为什么凤彩网打不开| www.323415.com-彩票816网站| www.844547.com-福利彩票社会贡献| www.974355.com-陕西福彩双色球玩法| www.ko33.com-幸运快三彩票兼职| www.77507.com-赢彩吧合法吗| www.147235.com-时时彩4星平刷大底| www.629203.com-9288彩票网-| www.79957.com-腾讯出过彩票游戏吗| www.220914.com-旺彩娱乐-| www.455011.com-青岛福彩中心官网| www.0996.date-彩票cp544cc| www.40872.com-黑客彩票中奖法| www.637127.com-彩虹六号不同版本| www.207700.com-彩票榜有几个软件| www.616955.com-玖壹彩票官方网| 大赢家彩票平台www.225075.com| www.4xx.com-职业竞彩玩家| www.0931.biz-体彩大乐透合买| www.39037.com-快三三不同号技巧| www.436066.com-体彩5808万-| www.151507.com-号百彩票-| www.ge0.com-河北福彩快三官网| www.967417.com-最霸气的彩票群名| www.748385.com-中彩彩票一分三| www.771643.com-重庆时时彩开下载| 中彩网www.71233j.com| www.34147.com-彩虹岛刷单app| www.173751.com-我要查彩票开奖结果| www.562339.com-吉林省新快三| www.684060.com-500万足球彩票网| www.30tc.com-星期日开哪几种彩票| www.41506.com-玩彩票害死人| www.553777.com-足球竞彩延期怎么算| www.d62.online-福建体彩官方| www.040698.com-趣头条彩票是骗局吗| www.617993.com-体彩张驰个人资料| www.826697.com-彩票app骗局平台| www.b54.org-江西快三每天多少期| www.568938.com-时时彩代理拉人话术| www.651712.com-永利彩票套彩金骗局| www.767857.com-香港旺彩4肖8码书| www.032324.com-如何辨别彩票真假| www.386380.com-四川省福利彩票组六| www.906771.com-江西快三是合法的吗| www.44.me-福彩3d图吧-| www.6695.cm-信彩票官方下载| www.086781.cc-七乐彩的奖金| www.525654.com-时时彩地下玩法| www.977901.com-彩色包装纸箱定制| 福彩www.86267d.com| www.858749.com-体彩组六六码遗漏| www.130597.com-多盈彩票平台注册| www.44296.com-全民彩票注册网站| www.509795.com-彩神注册-| www.384428.com-贴吧彩票吧-| www.325485.com-狂想彩票字谜汇总| www.9593.biz-彩色图片-| www.616869.com-联发彩票网可靠吗| www.cf6.com-好彩1玩法-|