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天

知道了
1分快三 www.250533.com-中彩娱乐是骗局吗| www.9my.com-体彩幸运选号| www.1998.cx-网上彩票开奖查询| www.42115.com-彩票是什么样| www.637741.com-竞彩违法么-| www.747405.com-微讯彩票网-| www.840845.com-美甲彩妆店地面砖| www.931941.com-华彩快3-| 网易彩票www.506739.com| www.b43.net-江西快三计划| www.82ib.com-体彩7星彩怎么兑奖| www.5634.biz-平安彩票极速赛车| www.68595.cc-苏州竞彩店赚钱吗| www.2255.vip-三笠本子彩图百度云| www.162755.com-爱乐彩11选五5| www.024518.com-七星彩二等奖多少钱| www.026422.com-今曰福彩3d无名图| www.269615.com-帝王彩票app| www.741223.com-28彩票注册-| www.272345.com-健康的五快三良好| www.455964.com-痴迷买彩票的案例| www.74fs.com-彩宝彩票是不是骗局| www.5204.vip-竞彩计划单稳赚| www.43184.cc-刮刮乐中彩网| www.035057.com-刷彩票返利额度| www.45rn.com-竞彩店刷销量公式| www.207289.com-快3彩票软件怎么做| www.91tk.com-长白彩票站招聘| www.991740.com-中国体彩生肖| www.23007.com-王者彩吧app下载| www.o97.club-玩彩票wcp-| www.666.me-重庆时时彩有漏洞| www.023743.com-一分彩票app下载| www.873551.com-网易购彩靠谱吗| www.596392.com-怎么观察快三走势图| www.771859.com-福利彩票开奖期查询| www.932827.com-微信上怎么买彩票| www.51vh.com-足彩凯利指数分析| www.6698.net-竞彩天天-| www.100011.com-广东体彩36一7| www.233439.com-乐彩网走工具图表| www.343413.com-时时彩买个好| www.901121.com-中国体彩报电子版| www.080144.com-近期中奖彩民新闻| www.055133.com-彩色的梦教案| www.732830.com-彩票排列三走试图| www.834860.com-乐米炫彩是什么| www.977334.com-河南给彩礼-| www.gn88.cc-七乐彩开奖走势图| www.912314.com-彩票店新模式| www.71393.com-体彩任五开奖结果| www.062729.com-湖北体彩网开奖结果| www.6548.cn-福彩三d条件| www.33009.cc-西安快三真假| www.88971.cc-53彩票app下载| www.628587.com-app彩票停售原因| www.731797.com-8k彩票违法吗| www.813087.com-线上体彩怎么赚收益| www.907345.com-快三输了怎么| www.994730.com-福彩3d今日金胆| www.x25.com-七彩开奖直播| www.97tg.com-竞赢彩票是什么| www.48748.com-87彩票客户端下载| www.69549.com-芒果彩票app下载| www.711772.com-时时彩高手杀号技巧| www.bq56.com-人人快三app下载| www.406914.com-彩票代理犯法么| www.nm07.com-中国竞彩投注比例| www.47av.com-现在开体彩店赚钱吗| www.919408.com-体彩机器换纸示意图| 百姓彩票www.bxcp3.com| www.507752.com-鸿运彩票手机客户端| www.503035.com-投彩能赚-| www.598069.com-福利彩票推算| www.322342.com-68彩票网彩种| www.7xe.com-中彩票后离婚| www.5062.pw-竞彩足球开停售时间| www.9775.wang-七星彩最新预測专家| www.568036.com-福彩10选8怎么玩| www.77746.cc-体彩大乐透周几开奖| www.4311.vip-篮彩神棍吧-| www.979527.com-好彩印第安铁盒| www.466528.com-平台自带秒秒彩| www.cp0366.com-老快三跨度走势图| www.023344.com-大众彩票ios| www.98ax.com-炫彩跑马灯壁纸| www.4399.net-福彩3d兑奖-| www.15360.com-桐乡福彩中心| www.84450.com-乐彩网摘3d预测版| www.65219.com-买七乐彩怎么中奖快| www.033003.com-体育彩票打票教程| www.331123.com-彩81彩票下载安装| www.0141.cm-彩色的定义-| www.206879.com-下彩网为什么不抓| www.0220.in-爱心彩中国彩票| www.0679.tv-香港赛马结果及派彩| www.6660.in-男子赌彩-| www.182301.com-下栽宁夏快三| www.276937.com-深圳快乐彩开奖公告| www.367888.com-体彩开机号号| www.931705.com-彩票中大奖横财预兆| 中国福利彩票www.08588n.com| www.13998.com-7070彩票平台| www.83968.com-彩票投注站如何赚钱| www.063999.com-时时彩送注册38| www.223999.cc-体彩开奖日期是周几| www.025048.com-彩富网最快报码结果| www.58252.cc-安装天空彩票| www.45539.com-微彩网官方网站| www.872164.com-遵义彩票中奖| www.969396.com-万彩彩票邀请码| 幸运彩票www.853199.com| www.651111.com-风景水彩教程| www.759819.com-彩票极速pk技巧| www.872383.com-福彩开奖直播新浪| www.961800.com-用微信能不能买彩票| www.le89.com-中彩彩票ios下载| 博友彩www.755213.com| www.81792.com-吉林快三系统故障| www.732500.com-篮球竞彩玩法| www.835636.com-青海体彩开奖结果| www.916205.com-致富彩票主页| www.984308.com-时时彩砍龙什么意思| www.ad48.com-河北福彩三-| www.121523.com-快购彩票平台怎么样| www.cai2733.com湖北快三开奖查询| www.181104.com-旺彩双色球专业版| www.360001.com-黑彩服务器-| www.165811.com-福彩中心工资待遇| www.6806.me-浙江十二选五爱彩乐| www.35589.com-大通彩票手机| www.95527.com-那个彩票软件能杀号| www.089253.com-彩6买哪个版本| www.168015.com-湖北今天快三| www.52532.com-福利彩票开店标准| www.014408.com-七乐彩杀号彩宝贝| www.076933.com-app彩票大全| www.318483.cc-奔腾彩票怎么样| www.388316.com-华彩联合支付宝团队| www.500505.cc-英国皇家5分彩开奖| www.7995.in-彩民周刊小宋| www.880007.com-天天彩选三开奖结果| www.cp3588.com-彩票店可以买快三吗| www.24980.com-彩色铅笔画画桃花| www.336449.com-可提现的彩票app| www.el27.com-好运快三-| www.856535.com-七星彩走势图表最全| www.007665.com-k彩手机版下载安装| www.068117.com-go彩彩种-| www.160923.com-北京开彩票站赚钱么| www.784609.com-中福在线彩票| www.86125.cc-山东彩涂卷厂家排名| www.197080.com-七乐彩机选-| www.262210.com-福利彩票快三改革| www.89462.com-购彩平台元角分| www.513334.com-福彩3d开奖结果今| www.885147.com-正规网上购彩平台| www.973617.com-快三输了能不能回本| www.cai7011.com金手指甘肃快三推荐| www.550960.com-福彩追号多久| www.280043.com-福彩快乐12-| www.351195.com-买福利彩票时间表| www.407733.com-连中彩票ios版| www.496868.cc-即时彩票怎么样|