Question

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

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

父选项卡由引导选项卡生成，子选项卡是自定义的。

要检查问题，请转到以下网址的“我们真实的租赁车队”部分。

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类作为第一个导航，但在您拥有的标签上，您已激活第二个标签。

只需将active类从第一个导航剪切/粘贴到第二个导航。

JQuery选项卡在嵌套选项卡上显示/隐藏错误

2 个答案: