jQuery Javascript菜单导航添加删除类

时间:2012-12-11 13:45:01

标签: javascript jquery menu navigation

当网站为www.example.com并加载index.html时,导航将无法预选显示的主页。我有一个填充菜单的函数和另一个函数来获取当前页面以添加循环的类,我知道当站点为www.example.com index.html页面时我无法找到将类更改为当前

我尝试过不同的if语句,并尝试在li中设置一个默认类,即<li><a href='index.html' class='current'>Home</a></li>,但它会显示我访问的此页面和其他任何页面。

/*Navigation menu*/
function navMenu(){
document.writeln("<ul id='menu' class='menu'>");
document.writeln("<li><a href='index.html'>Home</a></li>"); 
document.writeln("<li><a href='myself.html'>About</a></li>");
document.writeln("<li><a href='portfolio.html'>Work</a></li>");
document.writeln("<li><a href='news.html'>News</a></li>");
document.writeln("<li><a href='contact.html'>Contact</a></li></ul>");   
}


function setActive() {
/*current page function*/
 $('#menu a').each(function(index) {
    if(this.href.trim() == window.location)
        $(this).addClass("current");
});}

这样工作正常,但就像我提到的那样,我不明白如何集成添加或查找如果在开始时有一个默认类,当URL为www.example.com时,我会将当前类添加到{{ 1}}

2 个答案:

答案 0 :(得分:0)

如果您在致电index.html时加载/,,只需将首页的href更改为/,而不是index.html

答案 1 :(得分:0)

根据a标签上的href外观,您要检查pathname

function setActive() {
/*current page function*/
 $('#menu a').each(function(index) {
    if(this.href.trim() == window.location.pathname)
        $(this).addClass("current");
});}