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：

$（function（）{

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

让我们用类

制作技巧

$("#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 个答案: