简单快速实现tab切换

Posted 麦兜家园

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了简单快速实现tab切换相关的知识,希望对你有一定的参考价值。

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初始者了解的 后一定会很清楚的!有疑问欢迎评论区提出,第一时间回复哦!

 

以上是关于简单快速实现tab切换的主要内容,如果未能解决你的问题,请参考以下文章

简单快速实现tab切换

通过JavaScriptcssH5 实现简单的tab栏的切换和复用

微信小程序--Tab栏切换的快速实现

微信小程序实现滑动tab切换和点击tab切换并显示相应的数据(附源代码)

react实现的tab切换组件

jQuery实现tab栏切换效果