Как я могу запускать динамическую вкладку всякий раз, когда я нажимаю на статическую вкладку?

Question

У меня есть пример HTML, как это:

<!-- Nav tabs --> 
<ul class="nav nav-tabs" role="tablist" id="tab1"> 
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> 
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> 
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> 
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> 
</ul> 

<ul class="nav nav-tabs" role="tablist" id="tab2"> 
</ul> 

<!-- Tab panes --> 
<div class="tab-content"> 
    <div role="tabpanel" class="tab-pane active" id="home">Home</div> 
    <div role="tabpanel" class="tab-pane" id="profile">Profile</div> 
    <div role="tabpanel" class="tab-pane" id="messages">Messages</div> 
    <div role="tabpanel" class="tab-pane" id="settings">Settings</div> 
</div> 

И в JQuery:

$ (функция() {

$("#tab2").html($("#tab1").html()); 

//event click for tab2 
$("#tab2 li a[data-toggle='tab']").on("click",function(){ 
     $("#tab1 a[href="+$(this).attr("href")+"]").trigger("click"); 
}); 

//event click for tab1 
$("#tab1 li a[data-toggle='tab']").on("click",function(){ 
     $("#tab2 a[href="+$(this).attr("href")+"]").trigger("click"); 
}); 

});

Tab1 - статическая вкладка, tab2 - динамические элементы (скопируйте html из tab1).

Все, что я хочу сделать, - это когда всякий раз, когда нажата кнопка tab1, нажмите tab2 и нажмите и наоборот. Но мне не повезло. Кто-нибудь может мне помочь? благодаря

https://jsfiddle.net/qq6tyqo9/1/

Answer 1

Пусть сделать трюк с классом

$("#tab2").html($("#tab1").html()); 


$("#tab2 li a[data-toggle='tab']").on("click",function(){ 
    $("#tab1 li").removeClass("active"); 
    $("#tab1 a[href="+$(this).attr("href")+"]").parent().addClass("active"); 
}); 

$("#tab1 li a[data-toggle='tab']").on("click",function(){ 
    $("#tab2 li").removeClass("active"); 
    $("#tab2 a[href="+$(this).attr("href")+"]").parent().addClass("active"); 
}); 

Answer 2

попробовать как this-

var a = '1';var b ='1'; 
    $("#tab2").on("click","li a[data-toggle='tab']",function(){ 
    console.log(b); 
    if(b==1){a=2; 
      $("#tab1 a[href="+$(this).attr("href")+"]").click();}else{a=1;b=1;} 
    }); 

    //event click for tab1 
    $("#tab1").on("click","li a[data-toggle='tab']",function(){ 
    console.log(a); 
    if(a==1){ 
    b=2; 
      $("#tab2 a[href="+$(this).attr("href")+"]").click(); 
    }else{b=1;a=1;} 
    });