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.291945.com-基诺彩票中奖规则| www.bp05.com-快三选号助手| www.296606.com-福彩三地开奖号| 188彩票www.188932.com| www.374438.com-彩票3d排列三| www.590905.com-彩票世纪ll-| www.930108.com-足球彩票竞猜规则| www.yz38.com-快彩彩票平台| www.940929.com-七乐彩精准预测| www.760458.com-彩票站能挣多少钱| www.le90.com-天天彩票下载app| www.69nq.com-彩虹六号倍镜怎么搞| www.092079.com-体彩7刮刮乐中奖图| www.uc54.com-彩神网论坛火爆四肖| www.46078.com-彩票对打套利视频| www.ec26.com-大发快三破解神器| www.89cg.com-彩票双色球多组数字| www.380234.com-七乐彩中三个好| www.983874.com-258彩票下载平台| www.533267.com-昨日快三开奖号码| www.751969.com-手机上怎么彩票下注| www.499403.com-鼎丰彩票真的假的| www.358581.com-掘金团队彩票微信| www.xu11.com-彩票一般买哪个好| www.186708.com-快三的规律-| www.bc12.com-甘肃快三遗漏一定牛| www.011007.com-昨日体彩开奖号码| www.523605.com-东湖社区福彩讨论区| www.817657.com-中国福彩开好直播| www.208204.com-快三开奖结果青海| www.j70.me-彩票网投平台跑路| www.804678.com-买个时时彩源码下载| www.5495.pw-下载双彩网-| www.604134.com-皇乐彩票是骗局吗| www.hs44.com-新浪足彩胜负彩预测| www.90436.com-76c彩票靠谱吗| www.105881.com-时时彩123助手| www.99gv.com-福彩3d图库大熊猫| www.826611.com-个体彩字谜-| www.33655.com-网上买高频彩合法不| www.806255.com-体彩彩票app诈骗| www.920317.com-福彩12生肖走势| www.32985.cc-彩票蚂蚁团队| www.025440.com-赢彩票是真的吗| www.691069.com-大鲸彩票-| www.9080.cn-福彩七彩乐中奖奖金| www.036963.com-彩ed2k-| www.902049.com-彩票站买黑彩| www.256731.com-手机中彩网靠谱吗| www.465939.com-福彩3d速查表视频| www.150735.com-网上打彩票赚佣金| www.287719.com-福彩扫码摇大奖| www.757221.com-中国体彩36选7| www.7199.com-快三中两个有奖吗| www.25393.cc-彩铅桃花-| www.64466.cc-竞彩app推荐| www.410558.com-家彩开奖app下载| www.208045.com-广东天彩查-| www.301586.com-七星彩特区彩票论坛| www.388320.com-华彩app-| www.505643.com-金博彩票下载| www.581124.com-江苏七星彩开奖号| www.696010.com-体彩足球北京单场| www.8665.club-快三机选-| www.61790.com-彩家园平台可靠吗| www.010268.com-熊猫福彩-| www.080137.com-一分快三豹子怎么出| www.135981.com-买彩票怎么能中| www.766187.com-柒鑫彩票骗局| www.867952.com-海南体彩论坛4十1| www.939527.com-福彩快三计划网站| 300彩票www.c300.cc| www.356791.com-足彩赌博-| www.875061.com-3d彩吧图厍第5版| www.233353.com-中国彩票官方app| www.349004.com-中原福彩二二选五| www.450577.com-梦被蛇咬七星彩号码| www.555041.com-彩票站改革背后| www.654076.com-菲律宾网络彩票事件| www.785123.com-大胜彩票最新安卓| www.870039.com-福彩3d中奖计算器| www.809350.com-彩票中奖率最高| www.875173.com-彩宝网首页彩| www.940775.com-全国快三最多的网站| 彩票5www.594243.com| www.858744.com-福彩七乐彩开奖公里| www.951842.com-58彩丨58彩开获| www.cai5955.com分分快三技巧集锦| www.086263.com-福彩网app骗局| www.7238.shop-安徽福彩无纸化投注| www.16715.com-福利彩票几种玩法| www.f12.in-乐彩彩票app| www.77ec.com-8g彩票-| www.uj59.com-彩票大赢家手机| www.76ae.com-分分彩反倍投| www.1287.cc-乐彩神平台-| www.7526.org-湖南媒体彩票事件| www.358403.com-领头羊时时彩官网| www.497377.com-我玩福彩亏了七万| www.604897.com-598彩票网官网| www.723161.com-神彩时时彩趋势软件| www.817485.com-传统足彩彩票资讯| www.920911.com-怎样破解博彩的平台| www.992336.com-310足彩预测| www.fc33.com-买彩票怎么开挂| www.174918.com-福彩快3下载苹果| www.026545.com-泰国利记博彩| www.20745.com-中国体育彩票竞彩官| www.93249.com-彩票快3最晚到几点| www.526993.com-澳洲快三开奖走势图| www.765130.com-彩甜糯333-| www.870551.com-易彩app靠谱吗| www.991241.com-内蒙古彩票11选5| www.66cj.cc-海南七星彩群| www.32dy.com-福彩中心下班时间| www.108929.com-苏宁彩票手机软件| www.222645.com-福彩3d专家-| www.1771.org-宁夏快三技巧| www.16988.cc-足彩老牛解盘| www.ml04.com-全天江苏快三计划| www.101.com-彩16平台合法吗| www.598014.com-彩票中奖没规矩| www.568802.com-彩票中心通知| www.779903.com-万能彩票软件下载| www.959532.com-小站宝彩票正规吗| www.u77.xyz-新彩吧网站首页| www.4613.cc-篮球体彩的心得| www.36928.com-彩票指南彩搜网| www.19fh.com-福利彩票第27期| www.494812.com-足球竞彩二串一推荐| www.92328.com-足彩混合过关玩法表| www.7951.shop-后加彩瓷器的特点| www.15839.com-华夏彩票下载网站| www.375022.com-香港彩福珠宝| www.501016.com-彩照出现时间| www.591849.com-彩虹六号墨冰多少钱| www.665353.com-竞彩店宣传图片| www.729068.com-福彩门户最新书签| www.784169.com-七星彩头尾购买网站| www.853711.com-彩票头条合法吗| www.933048.com-网赌时时彩对打套利| www.983718.com-幸运快3是什么彩票| www.cp534.com-快三哪个平台倍率高| www.444898.com-风铃艾彩原创合集| www.017609.com-360彩票网大厅| www.138789.com-彩鸿网-| www.sn47.com-福彩神牛网站| www.6942.vip-彩22大快3-| www.11286.cc-烟台体彩中心地址| www.41269.com-重庆福彩手机网址| www.8453.vip-香港新星彩网址| www.0922.xyz-怎么和别人合买彩票| www.388404.com-骰子和值大小彩票| www.542765.com-彩拾彩票正不正规| www.531671.com-念佛能中彩票吗| www.994921.com-好彩堂中特网| www.11wo.com-彩票私人平台| www.356794.com-黑龙江福彩下载安装| www.076968.com-十二生肖彩票在哪买| www.cz54.com-人人红彩票app| www.rg18.cc-快三免费的挂机软件| www.906031.com-福彩六加一走势图| www.964253.com-买足彩稳胜技巧| 盛大彩票www.5623c.com|