Question

我想在点击时向li元素添加一个类，以表明它是当前元素。

这是我正在使用的听众

$(document).on("click",".sidebar ul li a",function(){
  if (!$(this).parent().hasClass("current")) {
    $("li.current").removeClass("current");
    $(this).parent().addClass("current");
  } 
});

但后来我意识到这个类被添加了，并且页面再次加载并且类消失了。

所以我使用了page:load和page:change。这就是我用过的东西：

$(document).on('page:change', function(){

  $('.sidebar ul li a').click(function() {
    $(this).parent().siblings().removeClass('current');
    $(this).parent().addClass('current');
  });

});

但我似乎没有选择正确的事情。

现在我需要帮助才能将类添加到元素中，并在重新加载或更改页面后仍然使用它。 PS：更多信息

我的清单文件

//= require jquery
//= require jquery.turbolinks
//= require current 
//= require jquery_ujs
//= require twitter/bootstrap
//= require turbolinks

Current是我用于此特定操作的代码。

<小时/> Ruby on Rails
Jquery-railties 3.1.3
的 Turbolinks
的 jQuery的turbolinks

Answer 1

实际上，我担心您无法保留页面加载/更改中存在的任何javascript变量，状态或事件。您必须将它们存储在cookie / localstorage / etc中，从新的link-url解析它们或将它们设置为服务器端。另一种方法是不完全重新加载页面，只是例如通过ajax重新加载主要内容，替换它并设置导航链接类。如果您打算这样做，您还应该查看HTML5历史记录API和PushState，以便根据您的链接更改您的网址。

Answer 2

您必须使用服务器端代码来检测当前route/URL，然后将活动类添加到其中。

由于JavaScript/jQuery是客户端，正如@Mandeep在评论中指出的那样，当页面刷新时，您无法保留您的课程。

类从页面后的元素中消失：加载或更改

2 个答案: