jQuery新闻列表tab切换布局代码
选项卡|滑动门 次 2018-07-30jQuery新闻列表实现tab切换布局，轻松创建选项卡效果。通过滑动门技术，提升用户体验。代码简洁高效，兼容性强，适用于各类网站新闻展示，助您打造专业且用户友好的新闻界面。
jQuery简洁大气的新闻资讯列表tab布局，鼠标悬停tab标签滑动切换代码。
[声明] 墨鱼部落格所有资源为用户免费分享产生，若发现您的权利被侵害，请点击后方链接查看并联系我们，我们尽快处理。免责声明|侵权处理流程
使用方法：
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>
文件目录
本资源来自：代码 » 选项卡|滑动门 » jQuery新闻列表tab切换布局代码
注：此资源非帝国CMS模板/特效/源码，需要帝国CMS整站模板源码的小伙伴，请移步 帝国CMS模板，感谢支持！
js旅游推荐图片手风琴布局
« 上一篇
2019年07月24日
jquery课程项目TAB选项卡切换布局代码
下一篇 »
2018年07月13日
1、如非特殊说明，本站对本文提供的代码或者素材不拥有任何权利，其版权归原著者拥有。
2、以上提供的代码或者素材均为作者提供和网友推荐收集整理而来，仅供学习和研究使用。
3、如有侵犯你版权的，请来信（邮箱:48444431@qq.com）指出，核实后，本站将立即改正。
4、如有链接无法下载、失效或广告，请点击下面的报错或者联系墨鱼处理！
5、以上资源售价只是赞助，不代表代码或者素材本身价格。收取费用仅维持本站的服务器开销！
6、如无特殊说明，如：织梦或者帝国等开源CMS核心模板，那么默认提供的只是HTML模板！
7、所有代码素材效果均为演示打包，最终效果请参考演示效果，本站不提供任何技术支持和服务。
8、代码素材均为虚拟物品，演示和描述无错的情况下，无法进行退换服务。
2、以上提供的代码或者素材均为作者提供和网友推荐收集整理而来，仅供学习和研究使用。
3、如有侵犯你版权的，请来信（邮箱:48444431@qq.com）指出，核实后，本站将立即改正。
4、如有链接无法下载、失效或广告，请点击下面的报错或者联系墨鱼处理！
5、以上资源售价只是赞助，不代表代码或者素材本身价格。收取费用仅维持本站的服务器开销！
6、如无特殊说明，如：织梦或者帝国等开源CMS核心模板，那么默认提供的只是HTML模板！
7、所有代码素材效果均为演示打包，最终效果请参考演示效果，本站不提供任何技术支持和服务。
8、代码素材均为虚拟物品，演示和描述无错的情况下，无法进行退换服务。
