Question

我在页面上有标签给我带来麻烦。我认为这是在js代码中。有时您必须双击选项卡，有时您不会。

这是在Rails中使用HAML，我并不熟悉。我也没有写原始代码。我正在接管一个项目。

以下是代码： HAML

#myTabs
 %ul.tab-buttons.tab-buttons--boxed.tab-buttons--left.js-tabs.nav-tabs
   %li.active.tab-button
    %a#tab1.tab-button-link.active{"data-toggle" => "tab", "data-projects" => "not_archived"} Current Projects
   %li.tab-button
    %a#tab2.tab-button-link{"data-toggle" => "tab", "data-projects" => "archived"} Archived Projects

.tab-content
 #tab1C.container
  %ul.list-project
   = render @projects
 #tab2C.container
  %ul.list-project

JS

$('.js-tabs li a:not(:first)').addClass('inactive');
  $('.container').hide();
  $('.container:first').show();

  $('.js-tabs li a').click(function(){
    var that = this;
    var t = $(that).attr('id');
    $.get("/projects", {projects: $(that).data("projects")}, function(){},'json')
      .done(function(data){
        var projects = data.projects;
        if($(that).hasClass('inactive')){
          $(that).removeClass('inactive');
          $(that).addClass('active');
          $('#'+t+'C .list-project').html(projects);
          $('.container').hide();
          $('#'+ t + 'C').fadeIn('slow');
        } else {
          $(that).removeClass('active');
          $(that).addClass('inactive');
          $('#'+t+'C .list-project').html(projects);
          $('.container').hide();
          $('#'+ t + 'C').fadein('slow');
      };
        $('.open-popup-link').magnificPopup(magnificPopupOptionsPermissionEmail);
      })
  });

我尝试在codepen中显示代码，但它没有准确显示。 Codepen

Answer 1

如果您刚刚进入该页面，是否发现必须双击;如果刷新页面，则单击一下？

如果是这样，那么涡轮加载可能就是问题所在。一个常见的解决方法如下：

var ready;
ready = function() {
    // add your functions and calls here
}
$(document).ready(ready);
$(document).on('page:load', ready);

必须双击选项卡才能获得选项卡内容

1 个答案: