“tabs标签页” 动手用jQuery封装tabs标签页，可自定义标签位置（上、下、左、右）

蔚落 2023-06-15 07:07 56阅读 0赞

刚写一会，明天再更，先把自己写遇到的问题，记录一下

**问题一 已解决**  
关于点击新的tab标签，如何去掉旧标签样式的思路，  
目前有两个，  
1、自己一开始的思路是，var一个变量index，存储点击标签的dom，这样点击新标签的时候就可以定位index这个dom，取消这个dom的样式就行。  
2、直接用siblings(),去掉所有同胞的active（即选中或显示）样式，不管有没有这个类，

写这个的原因是，自己刚开始觉得思路一比较好，因为这样虽然多写几行代码，但是不用操作那么多的dom，只需要操作存储的那个index dom就行，性能上提高了。但是我忘了初始化的时候必须要显示一个，所以显示的这个还是要去找，还是要操作dom。考虑到初始化的情况，还是用sibings()比较简单一点。

**问题二 已解决并且下面的思维很重要**  
需要使用active吗？  
需要！  
为什么问这个问题，因为刚刚突然想到，组件是开发出来给人用的，而不只是你自己实现需求就行了的。  
如果不要active 选中样式，别人用你组件的时候，如果想改选中样式怎么办呢？去改js文件吗？这样就不是组件式的思维了。  
当然，content可以直接js控制样式是否显示。  
慢慢摸索到了点组件式开发的小小思维。

**问题三**  
下面代码中jQuery的写法，思想，和原理问题

$(this).addClass('is-active').siblings().removeClass('is-active');

$('.l-tab_item').click(function () { 
        var index = $(this).index();
        // 切换tab
        $(this).addClass('is-active').siblings().removeClass('is-active');
        // 切换content
        $('.l-tab-pane').eq(index).addClass('is-show').siblings().removeClass('is-show');;
    })

**备忘一**  
组件的样式，1.content问题，2.is-bottom问题  
**备忘二**  
把tab组件js代码的优化，做对比。  
**提醒一**  
后面组件完善后，要把成熟代码，业务逻辑先写在上半部分，后面再记录，开发过程，以及开发问题。