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.993957.com-微彩平台是合法的吗| www.ji73.com-中国福彩网彩种| www.q12.org-北京福彩三地走势图| www.197575.com-下载彩票开奖大全| www.345121.com-财神八彩票网| www.541124.com-亚洲塚本彩-| www.778773.com-釉中彩餐具能消毒嘛| www.863867.com-广西快三一天多少期| www.933725.com-东彩娱乐是真的吗| www.987617.com-快三单双算法教程| www.xo9.cc-代玩幸运快三可信吗| www.500899.com-彩色单张的图片| www.779655.com-中彩易app-| www.877735.com-买境外足彩算赌博吗| www.026743.com-日立彩票登陆| www.0303.la-彩拾彩票软件下载| www.8747.cn-安徽福彩快3基本走| www.004763.com-今日福彩开奖号| www.126894.com-百度彩票开奖大厅| www.238754.com-大发快三回血大师| www.353521.com-彩独-| www.432533.com-高频彩调整游戏规则| www.42613.com-6698彩票网站| www.93885.cc-体彩排列五历史最新| www.119111.com-彩神争霸2邀请码| www.231952.com-湖北快三是国家的吗| www.350444.com-彩霸王心水论诖| www.927393.com-玩快三正规网站| www.pg91.com-天下彩944cc| www.89cx.com-私彩后庄怎么量刑| www.8898.tv-福彩三d天齐网| www.82897.cc-彩票开奖直播网| www.188329.com-彩吧3d图谜第一版| www.416100.cc-a7娱彩注册-| www.804268.com-体育彩票网上如何买| www.939364.com-足彩北单比分直播| www.nw77.com-尊彩是不是真的| www.22395.com-彩礼和嫁妆-| www.025950.com-3号彩票网-| www.163101.com-巨彩彩票能提现吗| www.369539.com-酷彩安全吗-| www.338270.com-竞彩合买怎么研究| www.407474.com-关于彩票的新闻| www.778448.com-体彩中大奖兑奖程序| www.965575.com-竞彩5oo万-| www.ma14.com-一分时时彩计划| www.43re.com-精彩无比什么意思| www.6429.cc-5933彩票下载| www.64462.com-体育彩票常见的数字| www.100348.com-福彩3d和直走势图| www.333564.com-购物送彩票违法吗| www.730510.com-福彩六大专家杀号| www.931667.com-97彩票平台-| www.nt26.com-赌博和彩票的区别| www.730.cn-博盈彩票能提现吗| www.16893.com-体彩排列三的和值尾| www.005004.com-3d彩票中奖结果| www.113148.com-查福彩3d丹东全图| www.235980.cc-500网彩票首页| www.377490.com-附近体育彩票店电话| www.85727.cc-体育彩大乐透| www.094446.com-快三多久开一次新区| www.211517.com-老彩票平台-| www.332560.com-热购彩票骗局| www.480003.com-体彩网吧-| www.615788.com-彩票覆盖算法| www.726933.com-福星中彩网址| www.831370.com-彩票店请员工| www.931310.com-七星彩奖金分配| 福彩www.16878k.com| www.pi28.com-彩票表格-| www.37in.com-dd彩票是怎么回事| www.2375.cc-彩票开奖伴奏音乐| www.06166.cc-彩票开奖查做| www.73068.com-365彩票网打不开| www.055508.com-雅彩彩票正规吗| www.160353.com-宝利彩票app| www.273018.com-福利彩票三十| www.382258.com-得力彩票助手app| www.615113.com-三彩陶器-| www.755180.com-一些微信做中彩网的| www.263890.com-7k彩票-| www.391088.com-天空好彩免费料大全| www.637651.com-体彩字谜1011| www.767656.com-体彩票福利彩票开奖| www.959463.com-彩吧图库3d连线| www.022273.com-恒彩88总代-| www.947134.com-高频彩百合男骗局| www.582.hk-刷彩投资-| www.63425.cc-足彩资讯哪里看| www.066834.com-银河博彩-| www.188399.com-福彩快三群-| www.372009.com-分分彩票官方app| www.8cr.cc-足彩篮彩qq群官方| www.4116.vip-七星彩最新规律表| www.891816.com-九彩凤凰简笔画| www.ta30.com-超级快三缩水软件| www.73wd.com-福彩3地开奖直播| www.7550.cm-廊坊彩票店转让| www.061171.com-好彩客为什么没人抓| www.213519.com-快三中奖-| www.362671.com-彩虹是怎样形成图片| www.3196.me-体彩最新一期开奖| www.57080.com-排三乐彩网开奖| www.150331.com-彩票中奖后去哪缴税| www.a71.net-彩种大厅360彩票| www.51049.com-彩票店要加盟费吗| www.202294.com-贵州省体彩兑奖处| www.245581.com-足彩竞猜500| www.394813.com-竞彩网赛果开奖| www.195365.com-江西快三推荐一定牛| www.329098.com-最新免费送彩金| www.509066.com-足彩票下载-| www.670709.com-烟台快三彩票| www.853205.com-金福彩票网不给提款| www.08709.com-陕西体彩app| www.80825.cc-快中彩中奖规则| www.127503.com-最新彩虹世界安卓| www.253956.com-玩彩app-| www.290119.com-大赢家彩票不能提现| 幸运彩票www.348499.com| www.830583.com-千福彩票骗局揭秘| www.010815.com-昨天福彩中奖结果| www.193901.com-河北快三一定| www.393563.com-昨日福彩3d-| www.527106.com-彩票帝国-| www.95021.com-福彩内部号的qq号| www.0125.top-春秋彩票是真的吗| www.483164.com-玩赚彩票停了怎么办| www.724725.com-彩票和我股票风险| www.852850.com-河北任五中奖彩票| www.990417.com-汇彩网登陆主页| www.019505.com-江西福彩自助| www.761975.com-重庆时时彩改版为啥| 大赢家彩票www.589411.com| www.1549.cn-中彩麒麟双色球| www.7899.loan-霍金留下的彩票公式| www.88531.cc-98198w彩票网| www.133427.com-拉菲彩票平台可靠吗| www.363601.com-生涯彩虹图理解| www.604796.com-利奥国际彩票app| www.801666.com-福彩3d选胆表| www.6376.top-杨震足彩最新| www.82222.cc-境外彩票网-| www.175517.com-哪个平台有快三| www.295123.com-下载贵州快三| www.507113.com-易点福彩手机版| www.629736.com-三个数是啥彩票| www.780425.com-人工智能彩票软件| 500彩票www.50064d.com| www.20aw.com-350彩票正规不| www.8489.cn-6d彩票下载-| www.88424.com-美国彩票多少钱| www.275883.com-河北快三爱彩乐| www.622092.com-五福彩票计划| www.850527.com-竞彩误差排行官网| www.80630.com-公务员买体育彩票| www.994130.com-3d彩票平台有哪些| www.ys5.cc-广西快三最大遗漏| www.7609.me-新浪爱彩足球任九| www.549141.com-哪些网站可以买足彩| www.739359.com-福彩k3网投下载| www.437178.com-中奖几率最高的彩票| www.940404.com-48彩票结果-|