主页的选定状态

Selected state for home page

本文关键字：状态 主页      更新时间：2023-09-26

我正在尝试使用jQuery创建一个选定的状态。我有所有的页面，除了主页，因为没有唯一的页面标识符(即www.abcd.co.nz

)

JS Fiddle here: 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");
}

你能这样做吗?

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作为默认值?

完全基于您的JSFiddle演示:

JavaScript问题

你的jQuery选择器在li, ul, header中寻找a.about元素。您的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;
}
相关文章：