将活动课程添加到当前页面导航链接

Question

嗨，我需要帮助，以使导航显示当前页面上突出显示的活动链接。 换句话说，当我单击链接以转到新页面时，我希望在打开新页面后看到该链接突出显示。 我可以通过在每个页面的活动链接中添加一个类来使用CSS来处理此问题，但是由于将有许多页面，因此我更希望使用JS动态地执行此操作。

我该如何使用Javascript来做呢？...感谢您的帮助。

下面是我认为方便的时候使用的代码。

这是HTML，只是构成导航的列表

<ul class="menu collapsible">
    <li id="main">
        <a href="http://google.com">About SfT</a>
        <ul class="acitem">
            <li><a href="page1.html">page1</a></li>
            <li><a href="page2.html">page2</a></li>
            <li><a href="http://www.textpattern.com/">Textpattern</a></li>
            <li><a href="http://typosphere.org/">Typo</a></li>
        </ul>
    </li>
    <li>
        <a id="main" href="#">Your Life</a>
        <ul class="acitem">
            <li><a href="page3.html">page3</a></li>
            <li><a href="">Ruby</a></li>
            <li><a href="">Python</a></li>
            <li><a href="">PERL</a></li>
            <li><a href="http://java.sun.com/">Java</a></li>
            <li><a href="http://en.wikipedia.org/wiki/C_Sharp">C#</a></li>
        </ul>
    </li>
    <li>
            <a id="main" href="">Your Health</a>
        <ul class="acitem">
            <li><a href="http://bookalicio.us/">Bookalicious</a></li>
            <li><a href="http://www.apple.com/">Apple</a></li>
            <li><a href="http://www.nikon.com/">Nikon</a></li>
            <li><a href="http://www.xbox.com/en-US/">XBOX360</a></li>
            <li><a href="http://www.nintendo.com/">Nintendo</a></li>
        </ul>
    </li>
    <li>
        <a id="main" href="#">Your Call</a>
        <ul class="acitem">
            <li><a href="http://search.yahoo.com/">Yahoo!</a></li>
            <li><a href="http://www.google.com/">Google</a></li>
            <li><a href="http://www.ask.com/">Ask.com</a></li>
            <li><a href="http://www.live.com/?searchonly=true">Live Search</a></li>
        </ul>
    </li>
</ul>

CSS（非常微小，仅用于测试目的）：

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.9em;
}

p {
    line-height: 1.5em;
}
#main {font-size:2em;}

ul.menu, ul.menu ul {
    list-style-type:none;
    margin: 0;
    padding: 0;
    width: 15em;
}

ul.menu a {
    display: block;
    text-decoration: none;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 2em;
}

ul.menu li {
  margin-top: 1px;
}

ul.menu li a, ul.menu ul.menu li a {
    color: #666;
    padding: 0.5em;
    font-weight: bold;
    font-size: 1em;
}

ul.menu li a:hover, ul.menu ul.menu li a:hover {
    color: #900;

}

ul.menu li ul li a, ul.menu ul.menu li ul li a {
    color: #999;
    padding-left: 20px;
}

ul.menu li ul li a:hover, ul.menu ul.menu li ul li a:hover {
    color: #900;
}
ul.menu ul.menu li a:hover {
    border-left: 0;
    padding-left: 0.5em;
}
ul.menu ul.menu {
    border-left: 5px #f00 solid;
}
ul.menu a.active, ul.menu ul.menu li a.active, ul.menu a.active:hover, ul.menu ul.menu li a.active:hover {
    color: #900;
}
div.panel {
    border: 1px #000 solid;
    padding: 5px;
    margin-top: 1px;
}

ul.menu div.panel a, ul.menu div.panel li a:hover  {
    display :inline;
    color: #090;
    margin: 0;
    padding: 0;
    font-weight: bold;
}
ul.menu div.panel a:hover {
    color: #900;
}


.code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; }
.code code { display: block; padding: 3px; margin-bottom: 0; }
.code li { background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em; }
.indent1 { padding-left: 1em; }
.indent2 { padding-left: 2em; }
.indent3 { padding-left: 3em; }
.indent4 { padding-left: 4em; }
.indent5 { padding-left: 5em; }
.indent6 { padding-left: 6em; }
.indent7 { padding-left: 7em; }
.indent8 { padding-left: 8em; }
.indent9 { padding-left: 9em; }
.indent10 { padding-left: 10em; }

JavaScript：

jQuery.fn.initMenu = function() {  
    return this.each(function(){
        var theMenu = $(this).get(0);
        $('.acitem', this).hide();
        $('li.expand > .acitem', this).show();
        $('li.expand > .acitem', this).prev().addClass('active');
        $('li a', this).click(
            function(e) {
                e.stopImmediatePropagation();
                var theElement = $(this).next();
                var parent = this.parentNode.parentNode;
                if($(parent).hasClass('noaccordion')) {
                    if(theElement[0] === undefined) {
                        window.location.href = this.href;
                    }
                    $(theElement).slideToggle('normal', function() {
                        if ($(this).is(':visible')) {
                            $(this).prev().addClass('active');
                        }
                        else {
                            $(this).prev().removeClass('active');
                        }    
                    });
                    return false;
                }
                else {
                    if(theElement.hasClass('acitem') && theElement.is(':visible')) {
                        if($(parent).hasClass('collapsible')) {
                            $('.acitem:visible', parent).first().slideUp('normal', 
                            function() {
                                $(this).prev().removeClass('active');
                            }
                        );
                        return false;  
                    }
                    return false;
                }
                if(theElement.hasClass('acitem') && !theElement.is(':visible')) {         
                    $('.acitem:visible', parent).first().slideUp('normal', function() {
                        $(this).prev().removeClass('active');
                    });
                    theElement.slideDown('normal', function() {
                        $(this).prev().addClass('active');
                    });
                    return false;
                }
            }
        }
    );
});
};

$(document).ready(function() {$('.menu').initMenu();});

Answer 1

为此，您需要能够将每个链接中的某些唯一元素与页面的其他某些唯一元素（例如URL）进行比较。

查看您所拥有的，您可能可以比较URL。 您必须获取当前页面的位置，解析URL以获得文件名（URL的最后一个/后面的最后一部分），然后遍历导航的每个href，解析每个导航，然后创建一个比较。 如果有匹配项，请向该链接添加一个类。

需要注意的是，这不是处理它的最有效方式。 另一个问题是，如果您在网站上碰巧有两个页面具有相同的文件名（这是闻所未闻的）。

我认为用BODY标记中的唯一类唯一标识每个页面可能是处理它的最佳方法。

因此，也许您的身体标签是：

<body class="page-contactus">

然后将一个类添加到导航中：

<li><a href="contact.html" class="link-contactus">Contact us</a></li>

然后，您将获得一个CSS块，它将在每页的基础上进行设置：

.page-contactus .link-contactus {[add active style]}
.page-home .link-home {[add active style]}
.page-etc .link-etc {[add active style]}