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天

知道了
彩票123现在叫什么名字 www.952864.com-旺彩科学预测| www.af77.com-星期五什么彩票开奖| www.by94.com-甘肃福彩快三助手| www.926728.com-买彩票多少钱一注| www.019477.com-四川省福利彩票官网| www.122730.com-天天中彩票可靠么| www.260303.com-彩票赌博-| www.341919.com-彩票256可靠吗| www.448400.com-老杨说彩字谜汇总| www.536108.com-体彩七星开奖结果| www.603040.com-身边有没有彩票中奖| www.672665.com-七星彩二等奖概率| www.742766.com-万彩双色球-| www.722299.cc-体彩三个红号算吗| www.957685.com-七星彩票推荐一注| www.cp474.com-大发快三怎么玩才赢| www.69796.com-盛世彩票导航线路| www.048858.com-3d小小鱼版彩吧图| www.136824.com-99彩票登录网址| www.444295.com-福彩预测胆-| www.583600.com-国外购彩软件| www.676906.com-彩色压印混凝土厚度| www.796058.com-优盈彩票注册| www.875024.com-苹果熊猫竞彩app| www.966456.com-福利彩票打票员工资| www.de51.com-快三开内蒙-| www.vr13.com-快三交流微信群| www.93hm.com-淘宝购物送彩| www.424558.com-彩乐瀑安全吗| www.543455.com-网易福彩查询结果| www.625671.com-长城彩票主页| www.693581.com-福利彩票发行和奖励| www.777612.com-双色球中彩村走势图| www.859358.com-体彩开机号家彩网| www.965207.com-福彩中奖条件| 鑫彩网www.xcw866.com| www.sq90.com-大乐透今日彩票预测| www.019694.com-大公鸡七星彩奖表图| www.102548.com-南粤风采好彩1预测| www.191369.com-精彩十分-| www.261161.com-印尼5分彩官网| www.342189.com-彩票256在线玩| www.412372.com-玩彩票怎么做好计划| www.515757.com-足彩提成-| www.580613.com-彩票专管员有编制吗| www.650737.com-彩之云客服电话| www.780773.com-下彩网网页版登陆| www.857773.com-博彩理财骗局视频| www.923069.com-手机108彩票软件| www.978252.com-彩色透水混凝土道路| www.cp4302.com-快三复式怎么买| www.54ny.com-中国移动官方彩票网| www.cp8283.com-上海快三开奖结果| www.292948.com-河南体彩手机版| www.024776.com-澳洲快三开奖| www.164049.com-中彩网是真的假的| www.599776.com-彩票中奖10000| www.618390.com-体彩是公益吗| www.ph91.com-下载海南快三| www.31qp.com-七乐彩每周开几次奖| www.26980.com-广东彩票预测中心| www.xy2.cc-福彩快乐十分玩法| www.r62.club-湖南福彩快三| www.752379.com-彩02彩票-| www.720868.com-横博快三-| www.060708.cc-聚华体彩店下载| www.271062.com-8亿彩下载安装| www.983406.com-青海快三推荐号码| www.d01.net-亚博体育app彩票| www.743101.com-金山彩票安卓| www.894510.com-七星彩开奖号号码| www.np60.com-彩票随机选号器| www.93xg.com-旧版众益彩票| www.9900.cm-为什么竞彩场次少了| www.086117.com-聚宝盆app福彩| www.366648.com-清乾隆古铜彩双耳炉| www.847767.com-古建筑彩绘-| www.jd9.com-广东福彩快三官网| www.1429.cn-大赢家彩票是什么| www.os18.com-快乐双彩-| www.8882.cm-重庆时时采彩作假| www.251763.com-内蒙快三遗漏统计图| www.04wo.com-花卉铅笔淡彩画| www.030797.com-冈易彩票双色球预测| www.773965.com-彩博888官网| www.021516.com-酷彩吧下载网址| www.387073.com-中国体彩网11选5| www.981.red-七星彩全中多少钱| www.bo49.com-易彩票app-| www.241423.com-彩库宝典旧版| www.427288.com-足彩加最新版本| www.974704.com-安徽彩票新闻| www.388792.com-买彩票中了500万| www.155859.com-怎么在微信上买彩票| www.587676.cc-苹果版彩票大师必中| www.815671.com-体育彩票排列7| www.61885.com-今福彩开结果| www.351154.com-彩乐乐快3-| www.570076.com-七彩山鸡苗批发价格| www.869803.com-彩管家app下载| www.584474.com-竞彩和足彩的区别| www.820076.com-彩礼新规-| www.781048.com-必发彩票手机导航| www.963296.com-彩铅花卉手绘图片| www.700040.com-五分时时彩玩法说明| www.860506.com-福彩3d开奖号多少| www.534.bid-网上玩时时彩会抓不| www.531621.com-排列5技术型彩民| www.3399.love-彩票双色球程远杀号| www.200097.cc-星期五什么彩票开奖| www.622722.cc-甘肃彩票领奖| www.ln25.com-官方手机彩票软件| www.966582.com-澳门五分彩是骗局吗| www.375252.com-福彩今天开机号| www.80hi.com-gc国彩网站-| www.28337.cc-体彩大乐透亿元大奖| www.003337.com-怎样上网买彩票| www.165587.com-排列三彩票票花详解| www.621035.com-极速三分彩-| www.7026.com-篮球胜负彩票怎么看| 大赢家彩票网www.54400d.com| www.485969.com-竞彩篮球胜分差规则| www.130840.com-洛阳伊川彩礼| www.878787.com-体育彩票玩法说明| www.1620.xyz-体彩地方彩-| www.089046.com-彩98彩票官网| www.570535.com-甘肃好彩快3| www.57987.com-破解彩票概率组合| 大赢家彩票平台www.950596.com| www.054222.com-三分快三什么意思| www.446119.com-95彩票平台下载| www.6437.xyz-竞彩赛程赛果| www.165104.com-买彩票怎么跟计划| www.813316.com-重庆时时彩彩票投注| www.53614.com-中国体育彩票扑克三| www.km60.com-彩客网即时比分直播| www.3754.vip-七星彩精准头尾王| www.oj16.com-体彩大乐透购买官网| www.4902.top-3a彩票线下载| www.69771.com-易彩网怎么下载| www.zv33.com-彩之家彩票代理| www.98mh.com-乐盈彩票吧-| www.7647.pw-香港6hck彩库| www.885769.com-体彩兑奖后多久到账| www.39ax.com-福建体彩高频走势图| www.297531.com-v8彩票app下载| www.465996.com-彩名堂稳不稳| www.740.cc-87彩票怎么发单| www.8699.cc-彩之星是正规的吗| www.872811.com-体彩加盟电话| www.784100.com-中国乐彩-| www.51490.com-天天彩选4今晚开奖| www.35849.com-头条彩票真实吗| www.023803.com-彩票中了三个| www.996430.com-星耀团队买彩票| www.024642.com-中国福彩网积分兑换| www.592752.com-彩票生肖牛是几号| www.rr45.com-护肤彩妆加盟店| www.089039.com-博友彩苹果版| www.760980.com-彩票站一年能盈利| www.al97.com-福彩3d组三胆拖表| www.837284.com-立彩有几种玩法| www.cai16.com-快三彩票app| www.3787.bid-5分快三开奖时间|