如何使我的 .selected class 在 href 列表中重新加载后保持在正确的 a(href)

Question

我有一个 link 的侧边栏，它会在您每次单击 link 时加载，但是当我加载下一页时，.selected class 移回 "all" 而不是选择的 link.

我知道这里用选项卡解释了这一点，但我无法使用我在列表中找到的方法而不是选项卡使它工作

我正在使用javascript编译link的列表，翡翠用于展示。

Jade Code（有点，我删掉了不需要的东西）

        ul.new.category
          li.selected
            div
              a.anm_det_pop(href='/popular')
                strong All
          each i in list
            li
              div
                a.anm_det_pop(href='/page/#{i}')
                  strong #{i.toUpperCase()}

我的脚本

script.
$(function(){
  $('.category > li').click(function(){
    $('.category > li').removeClass('selected');
    $(this).addClass('selected');
  });
});

脚本工作到我点击它的地步我在重新加载之前短暂地看到了 class 开关，在重新加载之后，.selected class 回到了所有。

我想要完成的是 .selected class 保持活跃状态 link。

如有任何帮助，我们将不胜感激。谢谢！

Answer 1

鉴于我不完全确定页面的工作方式，我认为您需要阻止默认的点击事件。希望这不会破坏应用程序。

$(function(){
  $('.category > li').click(function(e){
    $('.category > li').removeClass('selected');
    $(this).addClass('selected');
    e.preventDefault();
  });
});

Answer 2

弄清楚了，对于那些有同样问题的人，我将整个函数移动到一个 mixin 中，我已经在 js 中用 sequilize 制作了这个函数以包括当前页面以及我的 href 列表的列表所以比较简单。

mixin List(List,currentPage)
  ul.new.category
    li(class=!currentPage ? 'selected' : '')
      div
        a.anm_det_pop(href='/popular')
          strong All
    each i in list
      li(class=currentPage === i.page ? 'selected' : '')
        div
          a.anm_det_pop(href='/genre/#{i.page}')
            strong #{toTitleCase(i)}

在 Jade 中，您只需添加 mixin，然后将列表添加为参数

+List(List,currentPage)

mixin 读取当前页面并将其与列表进行比较，然后使列表中的选择具有 class.selection.

完美满足我的需求。

希望这对其他人有所帮助，因为我花了一天的时间试图找出我花了 15 分钟才完成的事情

如何使我的 .selected class 在 href 列表中重新加载后保持在正确的 a(href)

How to make my .selected class stay on the correct a(href) after the reload in a list of hrefs

javascript

jquery

href

node.js

pug