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.568451.com-今天福彩财子| www.020437.com-彩c38net-| www.442155.com-双彩求开奖-| www.552318.com-福盈彩票app| www.391666.com-7意彩代理-| www.556136.com-国乐彩网址-| www.685439.com-福彩蓝精灵21| www.791945.com-彩狮时时彩计划| www.75mt.com-天霁彩票预测网| www.589078.com-篮彩比分直播nba| www.113909.com-福彩官方下载| www.215581.com-福彩快三官方直营| www.876089.com-体育彩票排列三预测| www.51zz.cc-简单水彩画星空图片| www.2864.wang-彩虹糖小孩能吃吗| www.253717.com-买足球竞彩-| www.103252.com-丰彩彩票网网址| www.240748.com-画彩铅技巧-| www.339053.com-七乐彩开将结果| www.776756.com-长春市黑彩举报电话| www.882437.com-易彩票1-| www.153556.com-时时彩后三600注| www.536765.com-时时彩彩票投注站| www.ir66.com-彩乐乐遗漏网| www.034332.com-体彩名词有哪些| www.9894.vip-出彩娱乐-| www.099675.com-苏快三走势图| www.198257.com-好彩网牛彩吧| www.022394.com-江苏快三怎么注册| www.234490.com-国家认可彩票app| www.356954.com-对彩票的认知| www.464695.com-萍果精彩片段| www.827742.com-手机玩彩票可以提现| www.921376.com-彩票龙虎什么意思| www.993066.com-彩票滚雪球数字选发| www.du06.com-湖北快三今天开奖查| www.xd47.com-在线买彩票app| www.064382.com-足彩竞彩500万| www.228688.com-彩钢围挡厂家| www.591233.com-彩809注册页| www.78696.cc-乐彩论坛大乐透预测| www.467448.com-体彩购买截止时间| www.553354.com-网络彩票会合法化吗| www.656380.com-云彩厅合法吗| www.986471.com-竞彩足球比赛赛果| www.dw83.com-福彩网app可靠吗| www.89398.cc-彩票正版免-| www.941677.com-彩票世界充值网站| www.604985.com-888yy盈盈彩| www.719397.com-彩吧助手官网下载| www.op13.com-彩票361登陆| www.286849.com-中彩乐电子走势图| www.022805.com-a700福利彩-| www.0501.net-彩票超级大乐透开奖| www.7185.xyz-彩票助赢官网网址| www.608561.com-彩宝贝彩票| www.713855.com-时时彩单双经验| www.810482.com-彩票店新规定| www.903552.com-贵州快三游戏规则| www.964073.com-吉林快三开将结果1| www.cai2200.com河北体彩十一选五| www.920019.com-彩名堂苹果app| www.ni7.cc-人人中彩票苹果下载| www.11269.cc-网易足彩-| www.206464.com-安微快三一定牛| www.017085.com-阿里巴巴区块链彩票| www.659999.cc-彩预测客户端| www.99842.com-甘肃体彩排列5开奖| www.020287.com-专业玩彩个人网站| www.41co.com-七星彩自购盘| www.779.in-韩国快三计划软件| www.5084.net-彩票摇号软件下载| www.773160.com-时时彩厘模式投注| www.858613.com-七星彩明月珰番外| www.922921.com-怎么开好一个彩票店| www.975642.com-有彩礼没嫁妆丢人不| www.cp401.com-大发快三平台网址| www.995553.com-购彩之家下载| www.058092.com-彩届-| www.477295.com-新彩每天试机号| www.113407.com-珐琅彩真品图| www.090767.com-智胜彩票软件| www.673917.com-和玺彩绘-| www.0492.xyz-钻石彩票平台| www.249678.com-彩票77-| www.539021.com-彩票转让合同纠纷案| www.652165.com-体彩开奖直播电视台| www.225292.com-下载河南快三走势图| www.355375.com-蓝月亮彩票网| www.84200.cc-中国体彩客服| www.28807.com-玩网络彩票负债了| www.954979.com-快三是黑彩吗| www.cai8211.com河北省快三开奖时间| www.761493.com-饰演好彩妹-| www.38611.com-环彩app正规吗| www.r88.biz-网上江苏快三| www.68dh.cc-彩票应用软件计划| www.768973.com-亚博里的tcg彩票| www.49419.com-如何买时时彩| www.ux02.com-吉林6分快三| www.rs29.com-彩票app破解方法| www.9755.wang-8彩软件-| www.61579.cc-众彩之家app下载| www.026496.com-高频彩的概率玩法| www.230761.com-彩票风控是真是假| www.507571.com-内蒙体彩联系| www.554015.com-冠亚彩票网-| www.398691.com-多赢快三计划软件| www.922365.com-河南彩礼不超过三万| 天朝彩票www.15239.cc| www.953264.com-头奖彩票百度贴吧| www.rf71.com-彩票166官网| www.390365.com-彩票天天抢红包下载| www.0420.net-拉人提成玩北京快三| www.17ek.com-网上竞彩足球在哪买| www.99392.cc-500购彩网安全吗| JJ彩票www.73031.cc| www.74281.com-彩虹旗高清-| www.897740.com-彩票宣传语图片| www.0316.pro-彩票店如何扩展客户| www.7682.top-福利彩票六千万| www.469766.com-外国有哪些彩票| www.639917.com-双色球乐彩论坛字谜| www.531833.com-安卓版彩票33下载| www.365147.com-彩票k线软件安卓| www.x27.com-网易彩票电脑版网页| www.056912.com-快三猜大小技巧| www.95928.com-福彩考试知识题库| www.531850.com-大学生彩票事件| www.602053.com-重庆买彩票哥| www.676787.com-彩色包装盒定做厂家| www.039268.com-中国体彩网网络购彩| www.tr52.com-万彩网网赚是真的吗| www.521946.com-时时彩量刑-| www.950186.com-易赢彩票官网app| www.29cs.com-中国体彩网手机在线| www.442369.com-彩票站招聘信息| www.081330.com-卖福利彩票怎么提成| www.700226.com-足彩19042期| www.797145.com-98彩票98彩票| www.871753.com-利彩工具手机版| www.932578.com-大发快三有多少平台| www.976812.com-福彩双色球泰安中奖| www.cp7339.com-什么是快三-| www.61581.cc-乐优炫彩官方网站| www.75go.com-足彩怎么领奖| www.47wf.com-济南体彩销售网点| www.168313.com-河北快三遗漏| www.566609.com-彩神通代理微信多少| www.838315.com-专业玩彩双色球| www.914611.com-购买彩票的app| www.971110.com-彩票分哪几种怎么玩| 500彩票www.330627.com| www.65if.com-6538彩票-| www.467399.com-菏泽福利彩票电话| www.547767.com-高频彩票接口| www.630860.com-体彩飞鱼改版| www.693928.com-福利彩票兑奖期多长| www.773177.com-恒彩彩票合法吗| www.871843.com-遵义福彩中心| www.921505.com-彩神关注-| www.983658.com-下载彩票66-| www.ei.cc-大发快3彩票网| www.v77.net-微信彩票群拉人技巧|