简单快速实现tab切换

Posted 2020-10-07 麦兜家园

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

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

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

 1 我写简单的案例一般都是内嵌在页面里了，这样不用引用太多的文件
 2 <style>
 3         *{margin: 0;padding:0;}
 4         ul,li{list-style: none}
 5         a{text-decoration: none;color:#333;}
 6         .box{width:302px;height:302px;border:1px solid #e5e5e5;margin:300px 40%;}
 7         .box .title{width:302px;height:35px; line-height: 35px;overflow: hidden;text-align: center;border-bottom:1px solid #e5e5e5;}
 8         .box .title a{width:100px;float:left;line-height:35px;border-right:1px solid #e5e5e5;}
 9         .box .title a:last-child{border-right:none;}
10         .box ul li{text-align: center;margin-top: 100px;}
11     </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初始者了解的 后一定会很清楚的！有疑问欢迎评论区提出，第一时间回复哦！