简单快速实现tab切换

tab切换是经常会在项目中可见的案例，怎么用简单的jquary代码来实现 ，其实也很简单，废话不多，来看这个案例，我先把布局写一下：

这是简单的布局
 <div class="box">
        <div class="title">
            <a href="javascript:void(0)">标题一</a>
            <a href="javascript:void(0)">标题二</a>
            <a href="javascript:void(0)">标题三</a>
        </div>
        <ul class="content">
            <li style="color: #ff4413">content1</li>
            <li style="display: none;color: #5dff3e">content2</li>
            <li style="display: none;color: #1ff0ff">content3</li>
        </ul>
    </div>

接下来，给布局添加css样式，也是很简单的样式，可优化：

我写简单的案例一般都是内嵌在页面里了，这样不用引用太多的文件
<style>
        *{margin: 0;padding:0;}
        ul,li{list-style: none}
        a{text-decoration: none;color:#333;}
        .box{width:302px;height:302px;border:1px solid #e5e5e5;margin:300px 40%;}
        .box .title{width:302px;height:35px; line-height: 35px;overflow: hidden;text-align: center;border-bottom:1px solid #e5e5e5;}
        .box .title a{width:100px;float:left;line-height:35px;border-right:1px solid #e5e5e5;}
        .box .title a:last-child{border-right:none;}
        .box ul li{text-align: center;margin-top: 100px;}
    </style>      .box ul li{text-align: center;margin-top: 100px;}

最终，也是最重要的jquary来渲染实现效果了，前提一定要记得引用jquary.js，话不多说，看jquary代码：

<script>
     $(function(){
           //1、是给标题注册点击时间
           //2、找标题相应的下标的内容
          //3、来实现点击当前标题响应内容show出来
         $(".title a").click(function(){
             var idx=$(this).index();
             $(".content li").eq(idx).show().siblings().hide();
         })
    })
 </script>

这样，结果就出来了，把我写的以上代码复制出来，就能看到tab之间的切换效果了，其实这是最简单的写法，若是想让其在移动端或其他场合出现，其实就是响应更改一下布局就可以了，好了，今天就写到这里。一些jquary初始者了解的 后一定会很清楚的！有疑问欢迎评论区提出，第一时间回复哦！