单击静态选项卡时如何触发动态选项卡？

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 是动态元素（从 tab1 复制 html）。

我只想在点击 tab1 时同时点击 tab2，反之亦然。但我没有运气。有没有人可以帮助我？谢谢

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

Answer 1

这样试试-

 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;}
     });

Answer 2

让我们用 class

做个小把戏

$("#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");
 });

单击静态选项卡时如何触发动态选项卡？

How can I trigger dynamic tab whenever I click on static tab?

javascript

jquery

triggers

element

dynamic