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.5214.wang-彩票跨度分析| www.813959.com-聊彩大厅有红包| www.hw88.com-河北快三单双号玩法| www.84pj.cc-福州彩票开奖| www.447660.com-有足彩qq群吗| www.977722.cc-足彩四串一-| www.43tf.com-七彩建设股票| www.471163.com-我想做网络彩票代理| www.9593.biz-彩色图片-| www.553485.com-中超什么时候上竞彩| 1号彩票www.yi648.com| www.80le.com-boss直彩彩票| www.28cm.com-四川彩票快乐12| www.u27.club-下载速盈彩app| www.84mg.com-北控国彩传销案| www.3805.com-关小刀竞彩-| www.576949.com-兰州彩票店移机| www.654429.com-南昌体彩店-| www.25926.cc-彩虹寓意-| www.313543.com-福彩积分卡-| www.612582.com-d8彩票下-| www.030611.com-福彩双色球杀号定胆| www.138593.com-有多少人玩鸿彩| www.564001.com-多彩贵州风门票团购| www.88ai.com-中国彩吧3d走势图| www.710015.com-微信摇一摇彩票预测| www.794944.com-重庆时时彩牛牛计划| www.876564.com-牛彩网三地图库| www.968645.com-微信群有人带时时彩| www.cai685.com-三分快三是什么| www.866171.com-搜狐彩票网下载| www.944934.com-乐发彩票黑过钱没| www.999984.com-体彩大乐透资讯| www.dj82.cc-彩票的税率-| www.a03.org-在线买彩票-| www.60yt.com-c760彩票app| QQ彩票www.89894e.com| www.22023.cc-明彩纺织-| www.99462.com-体彩七位数中奖金额| www.19tp.com-创名彩票官网| www.48865.com-1分时时彩购买| www.073502.com-足彩单场-| www.704104.com-福利彩票三等奖| www.922044.com-湖北快三贴吧| www.ve49.com-易彩快买单双技巧| www.35758.com-地方福彩助手可靠吗| www.fn89.com-京东彩票下载手机版| www.565116.com-河南省豫彩通| www.571411.com-好彩堂4oo5oo| www.733486.com-安徽快三和值计划好| www.875047.com-区块链彩票合法吗| 500彩票www.927576.com| www.477016.com-福盈门彩票手机版| www.618165.com-幸运中福彩3d| www.cp6355.com-体彩app-| www.366716.com-兰州福利彩票| www.051323.com-幸福彩票幸运相伴| www.320095.com-体彩2元网首页| www.752219.com-网上彩票能相信不| www.969141.com-挪用福彩公益金| www.f69.net-中国福利彩票原主任| www.69640.com-三d分析预测彩吧| www.399377.com-七星彩坛论坛| www.984352.com-缅甸时时彩诈骗流程| www.cp504.com-快三下载-| www.74wk.com-95彩票技巧-| www.296831.com-福彩快三网上合法吗| www.72287.cc-600彩票网登录| www.07ne.com-三彩翡翠图片| www.62271.cc-彩票大赢家百度| www.179659.com-江苏快三是否合法| www.152666.com-藏宝图丨4s彩票| www.o35.biz-彩宝贝彩票开奖查询| www.201918.com-福彩助手绑定站点| www.299233.com-中彩彩票手机版| www.ld04.com-234彩票官方| www.404403.com-彩铅简笔画大全| 好彩头www.51331k.com| www.69804.com-海南省福彩兑奖地址| www.802591.com-中彩彩票怎么销户| www.881557.com-利记博彩规律| www.29008.com-彩神uv机官方网| www.v08.org-彩票中奖人的经验| www.356850.com-彩票可以做广告吗| www.274000.com-时时彩好软件| www.256625.com-彩乐网怎么下载安装| www.339874.com-山西省福彩-| www.72qz.com-竞彩容错怎么算| www.122829.com-香港酷彩专柜在哪里| www.p15.cn-搭建时时彩源码平台| www.101993.com-彩票能中吗-| www.240545.com-新3d彩票合法吗| www.77sz.com-私彩报警能破案吗| www.272559.com-pc彩票是啥意思| www.695058.com-今日足球竞彩分析| www.799182.com-快三助手版本| www.04qb.com-美国彩票延时开奖吗| www.62020.com-彩吧论坛首页彩票| www.215549.com-福建体彩7星彩规则| www.019412.com-中彩网网址大全| www.092557.com-河北彩礼多少| www.176195.com-彩票平台排行榜| www.306956.com-各彩票平台停止售卖| www.580923.com-天空彩牛网-| www.732687.com-南京体育彩票中心| www.916164.com-时时彩送注册38| www.532234.com-大悲咒求财中彩票| www.029765.com-彩票开奖源在哪| www.120289.com-河南快三怎么买稳中| www.877201.com-113彩票安卓版| www.1261.vip-7乐彩走势图100| www.96610.com-模拟彩票软件下载| www.331636.com-天福彩票官网| www.720303.cc-七星彩窍门-| www.kn39.com-8k彩票下载-| www.600118.com-充值1元彩票| www.3648.xyz-合肥彩票店铺转让网| www.r41.site-高频彩计划大全| www.2636.cc-时时彩百位杀号| www.31ra.com-金承志彩虹合唱谱| www.1904.wang-159彩票提现快吗| www.ty90.com-竞彩官方欧赔规律| www.03063.com-粤淘彩票注册| www.418943.com-彩票买5个数的| www.633493.com-彩票310什么意思| 凤凰彩票www.88266d.com| www.202351.com-广东快三开奖走势图| www.356829.com-红日彩票-| www.620118.com-彩色水磨石瓷砖| www.608132.com-重庆市体彩兑奖地址| www.740101.com-福彩和体彩哪个好卖| www.830970.com-新彩网站梅子手机网| www.894912.com-浙江福彩快2怎么玩| 双彩网www.179012.com| www.732.red-时时彩三星直选单式| www.132495.com-世界杯竞彩网站| www.163354.com-拉萨今日开奖号快三| www.fw04.com-怎么加入彩票群| www.r32.cc-快三什么时候结束| www.007.black-保利鸣彩艺术可信度| www.341258.com-福彩几点停止销售| www.088672.com-海南省体育彩票竞彩| www.248755.com-体彩福彩-| www.eu94.com-8888彩票大骗局| www.8832.vip-中国福利彩票e线| www.54042.com-时时彩漏洞骗局| www.898078.com-彩票害人的真实例子| www.952556.com-时彩推广-| www.987274.com-网络彩票投注兼职| www.nd4.com-湖北快三预测豹子| www.382687.com-福彩3d遗漏数据| www.217070.com-大发彩票计划| www.332612.com-网上购彩平台可靠吗| www.457828.com-恒彩彩票平台代理| www.585540.com-京东彩票网app| www.691625.com-烟台福彩双色球中奖| www.te77.com-时时彩组三大全| www.116912.com-彩票平刷挂机论坛| www.4674.vip-今期彩票买什么好| www.9992.bid-贵阳彩色压印混凝土| www.087187.com-福利彩票分析大师| www.187566.com-天津时时彩app| www.615960.com-彩神通关注号金码| www.725902.com-河北体彩领奖地址|