Question

我目前在这里通过CSS设置LI状态：

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

但是，我希望每次添加新页面时都不必在CSS文件中添加新规则。相反，我想用JS来说[如果body.class是= LI.class，那么在这里添加一个“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.
});

评论我做了一件事，就是使用正文的id检查它是否也作为LI上的一个类出现，然后我添加'here'类。（我使用id因为身体上可能有超过1个类，所以不可能知道哪一个。）

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

例如，

如果您在菜单项上循环，则可以测试该特定菜单项是否与所请求的当前页面相同。然后在li上打印here课程。然后你的css只需要li.here { /* current page styles */ }

使用JS确定当前页面上的状态

2 个答案: