鍍金池/ 問答/HTML/ jquery點(diǎn)擊a鏈接切換div

jquery點(diǎn)擊a鏈接切換div

想要實(shí)現(xiàn)的效果是點(diǎn)擊某個(gè)a鏈接，對(duì)應(yīng)的div會(huì)顯示出來，其他的div隱藏
一共有7個(gè)a鏈接和7個(gè)div

代碼：

var $tab_a = $(".tab_a");
    var $tab_div = $(".tab_div");

    for (var i = 0; i < $tab_a.length; i++){
        $($tab_a[i]).on('click', function () {
            document.write(i);  //7
            if($($tab_a[i]).attr("class") === 'tab_a current_a')
                return;
            for (var j = 0; j < $tab_div.length; j++){
                if (i == j){
                    $(this).addClass("current_a").parent().siblings().find("a").removeAttr("current_a");
                }
            }
            //$(this).addClass("current_a").parent().siblings().find("a").removeAttr("current_a");
        });
    }

得不到想要的切換效果，而且打印出來的i是總數(shù)7，求解謝謝~

回答
編輯回答
心沉

形成閉包了
這種綁定方式是原生js使用的,使用jq可以更優(yōu)雅的綁定事件

$tab_a.on('click',function(){
    var i = $tab_a.index( $(this) )
    //你這里是要寫的啥，沒看懂
    $tab_div.eq(i).show().siblings('.tab_div').hide()
})
2017年9月5日 16:33
編輯回答
乖乖瀦

顯然你已經(jīng)知道問題所在了，第一個(gè) for 循環(huán)內(nèi)

$($tab_a[i]).on('click', function () {
...
});

把 a 對(duì)應(yīng)的 div 對(duì)象作為參數(shù)，傳入 handler ，變成

$($tab_a[i]).click($tab_div[i], function (div) {
...
});

然后操作 div 參數(shù)便可。

2018年2月6日 16:33