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.861280.com-体彩任选三规则| www.540123.com-买体彩外围犯法吗| www.42949.com-天津七星彩开奖结果| www.96114.com-7o3彩票-| www.295792.com-福彩呼和浩特中奖| www.010997.com-5年信誉彩票| www.914966.com-博盈彩票是传销吗| 九九集团www.99jth.com| www.87275.com-14号彩票-| www.611783.com-一道彩虹是什么歌| www.719267.com-描写彩虹的优美段落| www.861002.com-福彩中奖号3d| www.971849.com-福彩字谜17500| www.261683.com-北京福彩快3怎么玩| www.d36.com-明发彩票登录| www.635.hk-快乐彩12选5规则| www.365838.com-体彩大小遗漏| www.569917.com-铂金彩票怎么取款| www.663817.com-中国彩巴更懂彩民| www.747449.com-时彩网站-| www.823955.com-新中国彩吧更懂彩民| www.902316.com-干黑彩抓到怎么办| www.971988.com-泰安体彩中奖| www.303996.com-湖南福彩报-| www.523860.com-黑彩平台登陆页| www.81825.cc-快三老输钱-| www.cai2922.com分分快三是什么意思| www.5853.biz-冠赢彩票怎么样| www.115551.com-星空下的鹿彩铅画| www.070046.com-火星彩票官网| www.068766.com-体彩大乐透专家汇总| www.534448.com-五行绝算彩票电子版| www.677719.com-天天中彩票被改号| www.296357.com-山东体彩快乐扑克| www.7977.com-博彩中介公司是什么| www.647681.com-彩票中奖预测公式| www.984956.com-彩运8有几年了| www.230765.com-大发彩票官网手机版| www.638573.com-上海彩票店怎么申请| www.819785.com-买彩票的好处与坏处| www.518019.com-福彩中心主任现任| www.633276.com-篮彩改-| www.879008.com-幸运快三是官方彩吗| www.de91.com-双赢彩票23566| www.822799.com-彩经网排列五开机号| www.903026.com-彩票路途遥远任务重| www.971452.com-彩票赚钱是真的吗| www.ao2.com-快三注册38-| www.371261.com-河内彩票计划| www.84944.com-巨彩彩票怎么骗人| www.951739.com-彩票高手网-| www.0742.xyz-安徽快三怎么选号| www.8886.shop-外围足彩代理怎么做| www.554207.com-彩票创意广告语| www.710379.com-对打套利彩金| www.814600.com-彩票机构改革动向| www.898599.com-七星彩预测号码推荐| 68彩票www.68682n.com| www.je95.com-深圳福彩官网| www.40fx.com-苏州彩铃-| 500彩票www.369477.com| www.40im.com-做彩票分析违法吗| www.274.in-澳大利亚彩票官网| www.128754.com-福运彩票输了三万| www.66242.cc-重庆信誉时时彩助手| www.050448.com-福彩安徽基本走势图| www.06ik.com-兰州市福彩-| www.752608.com-中国福利彩票骗人| www.062681.com-体彩屋下载地址| www.951676.com-红彩会app-| www.ss78.com-我买彩票中大奖经历| www.183415.com-银川福彩快3| www.197128.com-上海快3彩票查询| www.006972.com-赢彩排列三开机号| www.101107.com-三分时时彩官方| www.285183.com-时时彩是几点开| www.377122.com-足球彩票19047| www.469133.com-被r8彩票骗了| www.540563.com-龙珠同志彩漫| www.609522.com-七星彩17o37期| www.669750.com-106时时彩票| www.733199.com-835彩票-| www.796403.com-刷彩挣钱可靠吗| www.870587.com-鼎盛娱乐彩票| www.927289.com-韩国彩票网快三| www.975124.com-彩票什么计划最准| 大赢家彩票平台www.810603.com| www.5589.site-七乐彩3个半中奖吗| www.70448.com-体彩打印纸-| www.355535.com-竞彩扣税么-| www.460628.com-彩票分析新版下载| www.563772.com-每年今天福彩出奖号| www.655871.com-北京彩票店个人转让| www.784685.com-足球竞彩乐米网88| www.935733.com-中奖快线彩票官方网| 大赢家彩票www.391411.com| www.66703.cc-竞彩与外围间的漏洞| www.837.date-彩票流水是什么意思| www.4681.vip-3d家彩网独胆| www.9697.loan-彩宝网的三地开机号| www.101387.com-江苏快三算号神器| www.1214.top-河北福利彩票安装| www.7599.top-凤翔彩票登录| www.37945.com-玩彩票app推荐| www.1957.com-福彩3d双胆推荐| www.142674.com-福彩3d小小鱼图| www.171154.com-河北快三走图| www.256947.com-微彩app下载| www.248996.com-天天中彩-| www.173577.com-彩票快三的玩法| www.0001.biz-属龙今日打彩票| www.130121.com-彩票两元网走势图| www.xj10.com-唯博彩票信息| www.03je.com-信用卡透支玩快三| www.65jv.com-山西省福彩中心电话| www.3569.net-双色球中彩网讨论区| www.885701.com-利盈彩网app| www.973041.com-红彩网快三走势图| 天天乐彩票www.915196.com| www.43zh.com-精彩词语-| www.0999.me-福彩3d老师-| www.8431.vip-乐彩网倒闭了| www.551531.com-快乐彩五行概率| www.727129.com-今日福彩中心试机号| www.804816.com-c彩61平台下载| www.889067.com-彩站宝实体店app| www.1266.cn-08彩票论坛-| www.7997.in-交友平台博彩骗局| www.062467.com-乐彩网工具图| www.297038.com-彩票怎么看冷热号| www.365793.cc-彩铅画入门视频教程| www.479480.com-中国新彩吧网开机号| www.517565.com-福彩3d天罡八卦图| www.057965.com-体育彩票销售提成| www.168725.com-快三跨度是什么意思| www.246844.com-91彩神正规吗| www.313370.com-福彩3d双彩论坛| www.365880.cc-体彩组三最大遗漏| www.484518.com-讯赢彩票-| www.544165.com-彩票精准防连挂计划| www.92804.com-广东利彩五金塑料| www.348009.com-七乐彩票邀请码| www.450352.com-大庄家彩票可靠不| www.530713.com-福彩开奖1906期| www.870799.com-傲赢彩票app下载| www.101283.com-足球胜负彩预测分析| www.137797.com-老古董珐琅彩机械钟| www.im94.com-足彩凯利方差太准了| www.329702.com-金彩国际骗局| www.718629.com-彩虹有什么特殊含义| www.703085.com-足球竞彩模拟投注| www.0657.vip-胜负彩新浪购彩大厅| www.089784.com-快乐彩票(三)官网| www.603363.com-世界杯彩票代买| www.026823.com-代打彩票-| www.126093.com-上期福彩开奖号| www.220271.com-什么是炫彩彩票| www.876665.com-福彩p3-| www.997248.com-江苏利彩快三| www.y38.org-彩神通两码金码| www.8137.wang-必中快三软件免费版| www.260626.com-轻松驿站彩票| www.377400.com-彩票23期-| www.609293.com-彩票开奖三d走势图|