如何使我的.selected类在hrefs列表中重新加载后保持在正确的a(href）上

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

本文关键字：href 类在 selected 我的 何使 hrefs 列表 新加载 加载      更新时间：2023-09-26

我有一个链接侧边栏，每次点击链接都会加载，但当我加载下一页时，.selected类会移回"all"而不是所选链接。

我知道这是用这里的选项卡来解释的，但我无法使用我在列表中找到的方法来代替选项卡

我正在使用javascript编译链接列表，用于显示翡翠。

Jade Code（Kinda，我删除了不必要的东西）

        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');
  });
});

脚本一直工作到我点击它的地方，我在重新加载之前短暂地看到了类切换，在重新加载之后.selected类返回到all。

我想完成的是.选定的类保持在活动链接上。

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

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

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

想清楚了，对于那些有同样问题的人，我把整个函数移到了一个mixin中，我已经用sequilize在js中制作了这个函数，以包括当前页面以及我的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分钟做的事情

相关文章：