当我跟随 link 进入我的 rails 应用程序中的页面时，jQuery 选项卡不起作用

Question

我遵循了位于此处的教程：

http://inspirationalpixels.com/tutorials/creating-tabs-with-html-css-and-jquery

用 css、html 和 jQuery 创建制表符。它工作正常，但如果我转到另一个页面，然后在我的导航栏中单击 link 以返回带有选项卡的页面，单击选项卡不会执行任何操作。有什么想法吗？

Answer 1

我猜 turbolinks 是这里的罪魁祸首。添加到 Rails 以帮助加快页面加载时间，它会弄乱一些 jQuery 东西，因为它会阻止浏览器在您每次访问页面时重新编译 JS。

基本上，当您重新访问您已经访问过的页面时，标签代码的 jQuery(document).ready(function() {...}); 部分并不是运行。第一次 Rails 已经运行 javascript，所以为了加快速度，第二次没有这样做。不幸的是，您又需要 javascript！

对你来说幸运的是，jQuery 很聪明，并且有一个名为 page:load 的好活动，效果很好！添加以下代码：

$(document).on('page:load', function() {
    // tab code goes here
});

那应该行得通！

编辑

$( document ).ready(function() {
  tabs_init();
});

$( document ).on('page:load', function() {
  tabs_init();
});

function tabs_init() {
  jQuery('.tabs .tab-links a').on('click', function(e) {
    var currentAttrValue = jQuery(this).attr('href'); // Show/Hide Tabs
    jQuery('.tabs ' + currentAttrValue).fadeIn(400).siblings().hide(); // Change/remove current tab to active
    jQuery(this).parent('li').addClass('active').siblings().removeClass('active'); 
    e.preventDefault();
  });
}

当我跟随 link 进入我的 rails 应用程序中的页面时，jQuery 选项卡不起作用

jQuery tabs dont work when I follow link to the page in my rails app

jquery

tabs

ruby-on-rails