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.705028.com-福彩3d哪里下载| www.yp87.com-天津时时彩玩法说明| www.347759.com-爱赢球彩票真的假的| www.499439.com-体彩有哪几种彩票| www.590048.com-足彩竞彩比分计算器| www.00nf.com-描写雨后的彩虹作文| 500彩票网www.65707w.com| www.455774.com-乐猫彩票登录| www.551970.com-福彩中奖概率计算| www.636092.com-彩虹四无人机价格| www.720448.com-七星彩最新开奖号| www.811314.com-彩票王软件-| www.886043.com-六色彩虹含义| www.958439.com-彩九怎么下载安装| www.238810.com-彩金套利教程| www.004.cm-买彩票公式-| www.90586.com-彩票店二维码哪里找| www.382693.com-19022足彩分析| www.82gy.com-江西九江体彩网| www.2592.org-电信彩铃网站| www.398402.com-彩票分析计划软件| www.563865.com-体彩23期寻马图| www.638657.com-西安市竞彩足球| www.736646.com-普陀区体彩中心电话| www.815518.com-福彩双色球1倍中奖| www.887247.com-足彩翻倍跟单靠谱吗| www.953908.com-大神彩票-| 乐彩网www.3416e.com| www.ja56.com-足彩胜负彩-| www.yp24.com-江苏体彩领奖流程| www.125795.com-彩九怎么下载| www.135254.com-一品彩票平台| GO彩www.fo54.com| www.27927.com-玩秒秒彩-| www.068833.com-玩江苏快三怎么赚钱| www.295429.com-彩吧全图-| www.406823.com-订婚彩礼钱属于谁的| www.576014.com-如意彩票官网app| www.772366.com-老彩票平台稳| www.908712.com-90彩票大发快三| www.61qv.com-福彩3d钱王-| www.26869.cc-七星彩生日幸运选号| www.122597.com-彩名堂安卓4.0| www.454272.com-彩虹天堂任务| www.120728.com-足球彩票提成| www.ej72.com-大发快三追豹子技巧| www.82962.com-七星彩倍数怎么算| www.046118.com-天天竞彩安卓| www.4096.in-珐琅彩瓷器价格行情| 幸运彩票www.444165.com| www.502367.com-手机上吗时时彩助手| www.3844.cm-澳门六会彩生肖表| www.579210.com-彩票app怎么制作| www.197081.com-福利彩票123| www.522035.com-pp彩票靠谱吗| www.686710.com-体彩竟彩足球胜平负| www.29mn.com-体育彩票游泳是什么| www.235.cm-好彩一生肖-| www.07772.cc-中彩那天全文| www.193022.com-江西福彩网-| www.927468.com-韩国彩票快3| www.389295.com-七乐彩是什么彩票| www.6134.cc-结婚彩礼顺口溜| www.031845.com-手机彩票五选一| www.866855.com-快三福彩书籍| www.954645.com-购买国外彩票的方法| www.u89.com-彩票中奖啥时候兑换| www.2316.xyz-好彩彩票苹果版| www.355019.com-体彩1.7亿大奖| www.595802.com-中国福彩和华夏鑫彩| www.811896.com-吹吹七星彩交流论坛| www.918262.com-重庆市彩票越换中心| www.982787.com-彩票留存率-| www.ur16.com-3d彩吧论坛图库| www.52qh.cc-利彩靠谱吗-| www.99136.com-时时彩任选三玩法| www.106838.com-七彩彩票下载| www.871611.com-福彩3d过滤缩水器| www.876740.com-正版港彩-| www.37mm.com-申国福利彩票彩吧| www.8450.cn-星彩qq-| www.4qu.com-买彩票都是什么人| www.11uo.com-天津彩-| www.27739.cc-网上玩快三挣钱吗| www.208106.com-彩票稳赚不赔的买法| www.298831.com-六给彩票香港图片| www.392714.com-用水溶性彩铅画星空| www.548339.com-官方指定的购彩网站| www.672628.com-七星彩兑奖时间| www.bc4.cc-湖北精彩10分开奖| www.e18.club-免费彩票计划手机版| www.97eh.com-彩排-| www.608876.com-彩宝贝彩票下载安装| www.978914.com-体彩足球竞猜| www.253651.com-腾讯时时彩官方网站| www.536153.com-美国有几种热门彩票| www.1647.me-购彩网app官网| www.39735.cc-吉林快三推荐和值| www.022630.com-体彩开机号和试机号| www.39281.cc-全中彩票1-| www.023427.com-体彩买彩票几点截止| www.059401.com-渐江快三开奖| www.919938.com-摇彩票下载-| www.183536.com-广西快三倍投技巧| www.006164.com-外围彩票网站排名| www.133153.com-宝马彩票平台怎么样| www.250543.com-彩票怎么代理| www.323987.com-福彩手机彩票| www.449930.com-杭州体育彩票官方网| www.535444.com-彩票生肖动物| www.098737.com-电脑彩屏怎么办| www.554545.com-本期彩票预测| www.695071.com-中国福利彩走势图| www.820438.com-凉山州拆除彩钢| www.961472.com-大奖彩票平台能玩吗| www.hk04.com-湖北快三一定牛跨度| www.19ty.com-最新微信彩票群号| www.0764.cc-河北彩票中奖故事| www.102508.com-彩票132网页版| www.581016.com-新浪彩票图-| www.438669.com-五彩影院-| www.0747.net-万彩影像大师手机| www.hm24.com-足彩规则-| www.33661.cc-快乐彩开奖结| www.085229.com-ios彩票计划软件| www.116363.cc-福彩跨度遗漏| www.03uh.com-彩票设胆什么意思| www.bf90.com-黑彩平台注册| 500彩票www.50052h.com| www.698164.com-凤凰彩票就是个坑| www.798800.com-网上时时彩怎么玩的| www.867057.com-v8时时彩平台官网| www.951745.com-彩神彩票官网| www.2304.xyz-彩票店上班的坏处| www.413002.com-分分彩不倍投怎么赢| www.ii69.com-双彩球-| www.34de.com-时时彩制作一条龙| www.661.mobi-时时彩平台最好| www.04692.com-公益时报中华彩票| www.456054.com-在线彩票计划| www.bw02.com-投资彩票-| www.6nc.com-靠谱彩票软件下载| www.69vz.com-只有两家网络彩票| www.2898.com-顺德体育彩票| www.39189.com-6188彩票可信吗| www.286237.com-公益福彩被骗| www.26783.cc-彩票几点买号| www.032387.com-体育彩票店-| www.vj19.com-凤彩网排列三预测| www.18ib.com-天天首充彩票彩金| www.74ou.com-利奥彩票注册| www.0868.org-彩票中心在哪里| www.4831.com-怎么买彩票世界杯| www.9422.cn-华人会彩票app| www.36823.com-彩票28是正规的吗| www.395115.com-每周一开奖的彩票| www.530318.com-9号生活馆彩票骗局| www.821065.com-彩混凝土做法| www.930160.com-博牛彩票赌博案| www.641001.com-黄金集团彩票娱乐网| www.793058.com-绵阳福彩彩票加盟| www.927206.com-凤凰彩票提款| 500万彩票www.96386w.com| www.22hc.com-怎么更改彩票余额|