JQuery 选项卡 show/hide 嵌套选项卡错误

Question

我是jquery的新手，我曾尝试解决这个问题，但每次都失败了。

我在我的新网站上使用 bootstrap 选项卡和自定义 JQuery 选项卡部分创建了这个嵌套选项卡。但是在主选项卡上，我已将 class .active 添加到第二个选项卡。但是自定义选项卡总是从第一个选项卡加载详细信息。但在单击该选项卡后，它会加载实际内容。

父标签由bootstrap标签制作，子标签自定义。

要检查问题，请转到下面 url 的 "OUR AWESOME RENTAL FLEET CARS" 部分。

HERE IS THE URL

JQUERY 我用于显示自定义标签的代码：

  $("#tab1 .car-details").hide();
  $("#tab1 .car-details:first").show();
  $("#tab1 ul.custom-tabs li").click(function() {
     $("#tab1 .car-details").hide();
     var activeTab = $(this).attr("rel"); 
     $("#"+activeTab).fadeIn();     

     $("#tab1 ul.custom-tabs li").removeClass("active-cst");
     $(this).addClass("active-cst");
  });



  $("#tab2 .car-details").hide();
  $("#tab2 .car-details:first").show();
  $("#tab2 ul.custom-tabs li").click(function() {
     $("#tab12 .car-details").hide();
     var activeTab = $(this).attr("rel"); 
     $("#"+activeTab).fadeIn();     

     $("#tab2 ul.custom-tabs li").removeClass("active-cst");
     $(this).addClass("active-cst");
   });


  $("#tab3 .car-details").hide();
  $("#tab3 .car-details:first").show();
  $("#tab3 ul.custom-tabs li").click(function() {
      $("#tab3 .car-details").hide();
     var activeTab = $(this).attr("rel"); 
     $("#"+activeTab).fadeIn();     

     $("#tab3 ul.custom-tabs li").removeClass("active-cst");
     $(this).addClass("active-cst");
 });


 $("#tab4 .car-details").hide();
 $("#tab4 .car-details:first").show();
 $("#tab4 ul.custom-tabs li").click(function() {
    $("#tab4 .car-details").hide();
    var activeTab = $(this).attr("rel"); 
    $("#"+activeTab).fadeIn();      

    $("#tab4 ul.custom-tabs li").removeClass("active-cst");
    $(this).addClass("active-cst");
 });

Answer 1

$("#tab2 .car-details").hide();
$("#tab2 .car-details:first").hide();
$("#tab2 ul.custom-tabs li").click(function() {
      $("#tab12 .car-details").hide();
      var activeTab = $(this).attr("rel"); 
      $("#"+activeTab).fadeIn();        

      $("#tab2 ul.custom-tabs li").removeClass("active-cst");
});

#tab12不存在应该是#tab2

你的 custom.js 文件第 203 行。

Answer 2

错误不在您的自定义脚本中，不是您的标记。

              <ul class="nav nav-tabs main-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#tab1" role="tab" data-toggle="tab">ECONOMIC CARS</a></li>
                <li role="presentation"><a href="#tab2" role="tab" data-toggle="tab">PREMIUM CARS</a></li>
                <li role="presentation"><a href="#tab3" role="tab" data-toggle="tab">LUXURY CARS</a></li>
                <li role="presentation"><a href="#tab4" role="tab" data-toggle="tab">SUVs</a></li>
              </ul>

在上面的标记中，您使用了 .active class 作为第一个导航，但是在您拥有的选项卡上，您已经激活了第二个选项卡。

只是 cut/paste active class 从第一个导航到第二个导航。

JQuery 选项卡 show/hide 嵌套选项卡错误

JQuery tab show/hide error on nested tabs

jquery

tabs

twitter-bootstrap