每当我单击静态选项卡时，如何触发动态选项卡？答案

【问题标题】：How can I trigger dynamic tab whenever I click on static tab?每当我单击静态选项卡时，如何触发动态选项卡？
【发布时间】：2017-07-11 23:25:00
【问题描述】：

我有一个这样的 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/

【问题讨论】：

你能准备一个小提琴吗？还有一件事，这样的事情需要什么？如果两个选项卡可以保持打开状态，那么拥有选项卡的意义何在？？
看起来像 bootstrap，你应该删除其中一个标签并用 bootstrap 替换它来吸引更多相关的人
@GHOST93 我试着为我的问题做一个非常简单的例子。实际上我正在制作一个转换为下拉菜单的响应式标签，我需要为案例调整浏览器窗口大小同步 2 个标签。
@ALau：这完全是自举。删除标签是什么意思？

标签： javascript jquery dynamic triggers element

【解决方案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");
 });

【讨论】：

【解决方案2】：

像这样尝试-

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

【讨论】：