首页 > 用事件代理写 标签栏切换

用事件代理写 标签栏切换


看不太懂,索引不需要在设置时候就确定,只要在tab被点击的时候获取自己的索引就好。每次添加新的选项卡就给新的选项卡加事件

这里用jq写的话:

$('.tabClass').click(function(){
    var index = $(this).index();  //这样如果点击第三个tab就可以得到2
    $($('.imgclass')[index]).show().siblings('.imgclass').hide(); //展开相应的选项卡,关闭其他同胞
})

和下面的问题是一个原因:
http://.com/q/1010000002727652/a-1020000002727850


$("#ele").on("click",".xxxx",function(){
...
...
})


题主说的事件代理应该是事件委托把。上面说了你是动态生成的,那么那个动态生成的标签索引就是前面有的标签数量的和在加一。

// 假设 aLi 是标签的节点集合
// nLi是动态标签元素
// 标签数量和
var index_sum = aLi.length;

新添加的标签的索引就是nLi.index = index_sum++

然后你给每一个标签都添加一个自定义属性就行了

    for (var i = 0; i < aLi.length; i++) {
        aLi[i].index = i;
    }
   // 假设要委托的容器为 oUl
   oUl.onclick = function(e){
       var e = e || window.event;
        for (var i = 0; i < aLi.length; i++) {
                aCont[i].className = 'hide';
        };
        // e.target.index 就是我们自定义的属性,也就是索引
        aCont[e.target.index].className = 'show';
    };
【热门文章】
【热门文章】