Question

编辑：正在使用此代码：

        <div id="navigation">
            <ul class="menu">
                <li><a href="/index.php">Home</a></li>
                <li><a href="/about">About Me</a></li>
                <li><a href="/blog">Blog</a></li>
                <li><a href="/projects">Projects</a></li>
                <li><a href="/contact">Contact</a></li>
                <li><a href="/time">Current Time</a></li>
                <li><a href="/help">Help Me</a></li>
            </ul>
        </div>

使课程处于活动状态的代码：

        <script>
            $(function () {
                var url = window.location.pathname,
                    urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
                    $('#navigation a').each(function () {
                    if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
                        $(this).addClass('active');
                    }
                });    
            });
        </script>

这现在正在运作，但是当我要去Site/Projects/Project1它没有任何活动。当我转到Site/Project时，它会使项目标签处于活动状态。

所以它正在运作，但我也希望项目标签在我Site/Projects/Project1

时保持活跃状态

Answer 1

从零开始的数组索引。但是你已经用count = 1启动了for循环。可能是导致问题的原因。请更改以下代码并进行测试。

for(i=1;i<aObj.length;i++) {

应该是

 for(i=0;i<=aObj.length;i++) {

Answer 2

我不知道您是否乐意在您的网页上使用jQuery。

但如果你是这样的话，可以采用以下方法：

https://jsfiddle.net/fwLfdn8w/16/

已将其设置为将所有锚点进行比较：

location.pathname

并添加匹配的活动类

Answer 3

好吧，我用一点点的PHP得到了它。我的代码现在看起来如何：

$actual_link = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
    //If the link is http://localhost:8080/ (Homepage), Then make "Home" Active
    if($actual_link == "http://localhost:8080/"){
        ?>
            <div id="navigation">
                <ul class="menu">
                    <li><a class="active" href="/">Home</a></li>
                    <li><a href="/about">About Me</a></li>
                    <li><a href="/blog">Blog</a></li>
                    <li><a href="/projects">Projects</a></li>
                    <li><a href="/contact">Contact</a></li>
                    <li><a href="/time">Current Time</a></li>
                    <li><a href="/help">Help Me</a></li>
                </ul>
            </div>
    <?php
    }
    //If link is not http://localhost:8080/ Then do this.
    else{
        ?>
    <div id="navigation">
        <ul class="menu">
            <li><a href="/">Home</a></li>
            <?php
                //If the links is LIKE http://localhost:8080/about Then make it active
                //So http://localhost:8080/about/lalala will make about active!
                if (strpos($actual_link,'http://localhost:8080/about') !== false) { ?>
            <li><a class="active" href="/about">About Me</a></li>
                <?php }else{ ?>
            <li><a href="/about">About Me</a></li>
                <?php }
                //If the links is LIKE http://localhost:8080/blog Then make it active
                //So http://localhost:8080/blog/lalala will make blog active!
                if (strpos($actual_link,'http://localhost:8080/blog') !== false) { ?>
            <li><a class="active" href="/blog">Blog</a></li>
                <?php }else{ ?>
            <li><a href="/blog">Blog</a></li>
                <?php }
                //If the links is LIKE http://localhost:8080/projects Then make it active
                //So http://localhost:8080/projects/lalala will make projects active!
                if (strpos($actual_link,'http://localhost:8080/projects') !== false) { ?>
            <li><a class="active" href="/projects">Projects</a></li>
                <?php }else{ ?>
            <li><a href="/projects">Projects</a></li>
                <?php }
                //If the link is LIKE http://localhost:8080/contact Then make it active
                //So http://localhost:8080/contact/lalala will make time active!
                if (strpos($actual_link,'http://localhost:8080/contact') !== false) { ?>
            <li><a class="active" href="/contact">Contact</a></li>
                <?php }else{ ?>
            <li><a href="/contact">Contact</a></li>
                <?php }
                //If the link is LIKE http://localhost:8080/time Then make it active
                //So http://localhost:8080/time/lalala will make time active!
                if (strpos($actual_link,'http://localhost:8080/time') !== false) { ?>
            <li><a class="active" href="/time">Current Time</a></li>
                <?php }else{ ?>
            <li><a href="/time">Current Time</a></li>
                <?php }
                //If the link is LIKE http://localhost:8080/help Then make it active
                //So http://localhost:8080/help/lalala will make help active!
                if (strpos($actual_link,'http://localhost:8080/help') !== false) { ?>
            <li><a class="active" href="/help">Help Me</a></li>
                <?php }else{ ?>
            <li><a href="/help">Help Me</a></li>
                <?php } ?>
        </ul>
    </div>
    <?php
    }

我得到了它的工作：D谢谢你的帮助！

激活时更改菜单颜色项

3 个答案: