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天

知道了
彩01彩票 www.358097.com-彩票王最新版本| www.559933.com-彩图图库资料大全| www.503278.com-足彩分析软件哪家好| www.660346.com-易经与彩票中的规律| www.764818.com-彩票网站制作哪里| www.416774.com-什么购彩平台好不好| www.743388.com-什么叫做购彩计划| www.09et.com-中国福利彩票首页| www.8821.pw-腾讯分分彩龙虎走势| www.802.me-冯化成大六壬测彩票| www.793570.com-彩票站的老虎机| www.964374.com-体彩app有哪些| 大赢家彩票平台www.232651.com| www.gh42.com-辽宁体彩网11| www.108711.com-567什么做彩票| www.695050.com-常州福利彩票店转让| www.782266.com-腾讯分分彩必中方案| www.875521.com-3d彩报图汇-| www.993645.com-注册送388彩金| www.cm23.com-山东彩票十一选五| www.to06.com-安徽快三下期预测| www.231016.com-彩票256下载| www.101196.com-高反水彩票平台网站| www.381052.com-彩票拖胆-| www.744784.com-合法销售网络彩票| www.840649.com-烟草十彩票零售图片| www.927598.com-中国福利彩票中心| 环球彩票www.81455.com| www.ii00.cc-中国竞彩网竞彩足球| www.761946.com-大发时时彩大小计划| www.312124.com-乐透乐博彩三地字谜| www.521129.com-第一的彩票代购网站| www.604894.com-利澳彩票合法吗| www.691787.com-爱心彩注册-| www.789275.com-宝哥足彩-| www.880742.com-现在最大的黑彩平台| www.956293.com-体育彩票应用| www.cai5211.com甘肃快三推荐号码| www.an4.cc-河北体育彩票| www.g73.com-排列三彩宝网试机号| www.66kb.cc-凤凰彩票微信号| www.704898.com-海南私彩打码软件| www.982064.com-福彩站点查询| www.639181.com-彩票预测有用吗| www.778070.com-彩票喜乐彩-| www.883419.com-彩票端合法吗| www.5437.in-福利彩票胆拖价格表| www.49455.com-ttcp彩票-| www.203054.com-多宝彩票平台下载| www.pa11.com-快三秒盗窃| www.916826.com-1分快三大小规律| www.021474.com-7k彩票566-| www.1666.org-福彩3d九宫走势图| www.525582.com-时时彩计划导师群| www.773414.com-送彩金500的网站| www.238789.com-腾讯分分彩太可怕了| www.369082.com-体彩排三出号走势| www.33168.com-排列五中奖彩票新闻| www.891110.com-网络彩票推广广告语| www.18269.com-五分彩是不是正规的| www.70068.cc-体彩太湖三字诀| www.180996.com-河北快三形态一定牛| www.260350.com-彩票怎么选-| www.331382.com-彩票2元中奖故事| www.397544.com-彩票春节停几天| www.230042.com-500彩票幸运快三| www.311759.com-福彩3d彩报-| www.380256.com-七乐彩走势图012| www.93ku.com-彩色证件照是什么底| www.34301.com-上海体彩站分布图| www.my90.com-福彩三d视频讲座| www.cp.com-北京彩票快三查询| www.ei42.com-河南彩钢围挡定做| www.9zg.com-七彩彩票下载安装| www.134036.com-中固足彩网比分直播| www.228658.com-彩色包装公司| www.250588.com-中彩娱乐是真的吗| www.3976.bid-彩客网是什么| www.131040.com-安阳市区彩礼| www.421399.com-uc22com彩票| www.10782.com-爱彩乐彩票选号| www.371982.com-七乐彩开奖结果如下| www.567150.com-体彩双色球彩下载| www.646256.com-竞彩足球可以玩吗| www.96808.com-竞彩足球资讯哪里看| www.104825.com-福彩p62最新开奖| www.3893.wang-海南七星彩今期图规| www.10751.com-竞彩十四胜负彩开奖| www.236315.com-乐乐彩合法吗| www.335139.com-网上江苏快三| www.433684.com-江西福彩11选5| www.825378.com-竟彩猫-| www.954444.com-体育彩票6加1| www.gh01.com-福彩中奖是真的吗| www.00jz.com-福利彩票能中大奖吗| www.80xs.com-彩富彩票下载| www.hq15.com-好彩客官网-| www.986073.com-买彩票提成-| www.me48.com-福彩快三倍投技巧| www.695003.com-竞彩篮球比分直播唯| www.538870.com-乐宝彩票能提现吗| www.590782.com-天下彩票天下彩网| www.4478.vip-下载11选5彩票| www.02885.com-彩票app哪个号| www.173689.com-湖北快三官网| www.cp2035.com-幸运快三网-| www.142878.com-粤淘彩票下载安装| www.246882.com-彩票买那种好| www.318472.com-彩票开奖规定| www.936532.com-竞彩彩客彩票| 中彩网www.2408a.com| www.397103.com-赫斯缇雅全彩本子| www.539142.com-桃花运电视剧彩票| www.158490.com-彩票pc蛋蛋网址| www.95dq.com-金手指彩狗捕鱼客服| www.5737.wang-失控的黑彩刘雪龙| www.900359.com-乐彩论坛旧版下载| 环球彩票www.hqcp2.com| www.q00.win-彩八彩票安卓版官网| www.051952.com-福利彩票1360| www.fm5.com-网络彩票获利| www.325730.com-内蒙福彩双色球中奖| www.861837.com-体彩实体店的图片| www.931252.com-皇冠彩票网被骗了| www.984355.com-广州鸣彩服务电话| www.bg26.com-私彩网站-| www.pf96.com-玩吉林快三抽水| www.883077.com-甘肃快三二码遗漏表| www.956868.com-欧洲彩票5加2| 亿彩堂www.87668m.com| www.256212.com-福彩手机自助购彩| www.189626.com-福彩快3遗漏| www.684699.com-福彩3d牛材网杀码| www.31700.com-网彩代理申请| www.059183.com-快频彩票真的赚钱吗| www.672022.com-被人追杀买什么彩票| www.627785.com-双色球字谜乐彩网| www.hn81.com-江苏快三必中方法| www.289753.com-快乐彩34-| www.iq95.com-体彩排三直选遗漏| www.71ic.com-老重庆时时彩图感觉| www.6502.net-go彩平台账号啊| www.838037.com-疯狂的彩票-| www.065891.com-时时彩最安全的玩法| www.387637.com-全天重庆彩火山计划| www.496088.com-体育博彩公司排行| 豪彩VIPwww.966013.com| www.d84.net-128彩票下载安装| www.283722.com-七星彩对几个号有奖| www.0728.com-什么是彩票跟单| www.985004.com-728彩票网站| www.zj03.com-彩票图三d-| www.3840.net-台湾六星彩网址| www.615235.com-福彩3d新材巴| www.813900.com-宁夏福彩快三技巧| www.355752.com-彩票交税合理吗| www.004557.com-彩迷天地联销图今天| www.re60.com-国民彩票app下载| www.r58.cc-博大彩票官网| www.272875.com-福彩在线是正规的吗| www.867387.com-一定牛彩票中奖提现| www.012343.com-快三作弊器软件下载| www.52367.cc-倍数最高的彩票网| www.008511.com-智慧彩票预测破解版|