javascript - 用JS确定当前页面的here状态

Question

我目前通过 CSS 设置一个 LI here 状态，如下所示：

body.className li.className {styles for here state}

但是，我想避免每次添加新页面时都必须在 CSS 文件中添加新规则。相反，我想用JS说[如果body.class对LI.class是=，那么在同一个LI中添加一个“here”的类。

有人可以协助这个逻辑吗？

Answer 1

如果 body 元素上只有一个类名，应该这样做：

var bodyClass = $(body).attr("class");
$("li").is("."+bodyClass).addClass("here");

Answer 2

我假设您正在尝试使用这种技术在菜单按钮上设置“活动”类，例如“这里”，如“你现在在这里”或“当前页面”？

这当然可以通过 Javascript 完成，但我怀疑这是最好的方法。

javascript示例：（在jQuery的帮助下）

$(function() {
    var bodyId = $('body').attr('id');
    $('#menu li')            // find li tags in the menu list
        .removeClass('here') // remove previous occurance of 'here'
        .find('li.'+ bodyId) // find li with className equals to the body's 'id'
        .addClass('here');   // add the 'here' class to that Li tag.
});

备注我做的一件事是使用 bodyid来检查它是否也作为 LI 上的一个类存在，然后我添加了“here”类。（我用了，id因为body上可能有不止1个类，所以不可能知道是哪一个。）

可能的更好方法：class您显然已经在标签上将 当前页面写为 a body（我可以假设这是通过您的服务器端代码自动完成的吗？php？asp？java？...）如果您可以编写，那么您可以添加菜单中的逻辑测试也是如此。

例如，在您循环访问您的菜单项时，您可以测试该特定菜单项是否与当前请求的页面相同。here然后在li上打印一个类。然后你的CSS只需要 li.here { /* current page styles */ }