简单易用jquery实现tab栏选项卡点击切换代码(无需任何JS插件)

一些网站的栏目比较多，例如在制作门户网站时，如果想在一个页面上显示更多的内容又不增加页面篇幅，特别有效的方法就是使用tab标签切换来显示。效果如下图：

怎么在自己做网站时，做出这样的效果呢？按照下面的步骤操作就可以。

方法/步骤

1. 在自己的网站顶部代码里，引入JQUERY，如果你的网站已引入了JQUERY，可以跳过这一步。如果没有引入，先下载JQUERY文件。下载地址：https://pan.baidu.com/s/1boHle7H
   
2. 将下载下来的JS文件上传到自己网站空间的根目录；（如果不知道什么是网站根目录，可以先学习一下网站建设入门）
3. 在网页中需要显示TAB菜单的位置，粘贴以下的代码，里面的域名要改成自己的网站域名。里面的文字内容已换成你自己网站的地址和链接，或者是动态调用代码。将以下的CSS代码粘贴 到自己网站的CSS文件内。

   
   <div class="table_card">
   
   <ul class="tab">
   
   <li class="active">最新</li>
   
   <li>热门</li>
   
   <li>新闻</li>
   
   </ul>
   
   <div class="tabCon">
   
   
   
   <div class="active"><!---内容一--></div>
   
   <div><!---内容二--></div>
   
   <div><!---内容三--></div>
   
   
   
   </div>
   
   
   
   </div>
   
   
   
   <!--#@ 选项卡JS代码-->
   
   <script src="你的网站域名/jquery-3.1.0.min.js"></script>
   
   
   
   <script type="text/javascript">
   
   $(document).ready(function(e) {
   
   $(".tab li").click(function(){
   
   $(".tab li").eq($(this).index()).addClass("active").siblings().removeClass("active");
   
   $(".tabCon>div").eq($(this).index()).addClass("active").siblings().removeClass("active");
   
   })
   
   });
   
   </script>
   
   

4. 还要加一个CSS样式

   
   .table_card .tabCon>div { display:none}
   
   .table_card .tabCon>.active { display:block}
   
   

5. 这样基本上就大功告成了，剩下的就是结合自己网站的样式去调一下CSS了，达到自己网站的要求。
6. 如果网页上有多个TAB需要切换，可以将代码稍作修改即可实现。
   把<ul class=”tab”>加ID，例如mbtab1、mbtab2……
   再把<div class=”tabCon”>添加ID，例如：mbtabs1、mbtabs2……
   最后把JS换成以下的代码：

   
   <script type="text/javascript">
   
   $(document).ready(function(e) {
   
   $(".tab li").click(function(){
   
   var fid = $(this).parent().attr('id');
   
   var newid = fid + 's';
   
   $(".tab li").eq($(this).index()).addClass("active").siblings().removeClass("active");
   
   $('#' + newid + ' > div').eq($(this).index()).addClass("active").siblings().removeClass("active");
   
   $("img.lazy").lazyload({effect: "fadeIn"});
   
   })
   
   });
   
   </script>
   
   

7. 如果想改成鼠标滑动切换，只需要将$(“.tab li”).click(function(){改为$(“.tab li”).mouseover(function(){即可。或者直接使用滑动门Tab选项卡通用JS代码。