Question

我正在尝试使用jQuery创建一个选定的状态。由于没有唯一的页面标识符（即）www.abcd.co.nz

，因此我有所有页面都在主页上

JS小提琴：http://jsfiddle.net/zangief007/1ta4gxwn/

if (window.location.href.indexOf("/") > -1) {
    $("header ul li a.home").addClass("tn-selected");
}

if (window.location.href.indexOf("about") > -1) {
    $("header ul li a.about").addClass("tn-selected");
}

if (window.location.href.indexOf("links") > -1) {
    $("header ul li a.links").addClass("tn-selected");
}

if (window.location.href.indexOf("contact") > -1) {
    $("header ul li a.contact").addClass("tn-selected");
}

Answer 1

你能做这样的事吗？

var selector = "a.home";

if(window.location.href.indexOf("about") > -1) {
    selector = "a.about";
}
else if(window.location.href.indexOf("links") > -1) {
    selector = "a.links";
} 
else if(window.location.href.indexOf("contact") > -1) {
    selector = "a.contact";
} 

$("header ul li "+selector).addClass("tn-selected");

使用a.home作为默认值？

Answer 2

完全基于您的JSFiddle演示：

JavaScript问题

您的jQuery选择器会在a.about内的li范围内ul内查找header元素。您的JSFiddle演示没有header元素。

CSS问题

在更正了jQuery选择器后，您的新类确实应用了，但是您的CSS无效，因为它有奇怪的逗号。风格永远不会应用。

变化：

a.about.tn-selected,
a.contact.tn-selected,
, /* Remove this. */
a.links.tn-selected,
, /* ...and this. */
a.home.tn-selected{
    color:#333;
}

要：

a.about.tn-selected,
a.contact.tn-selected,
a.links.tn-selected,
a.home.tn-selected {
    color:#333;
}

或者只是：

a.tn-selected {
    color:#333;
}

主页的选定状态

2 个答案:

JavaScript问题

CSS问题