当菜单项处于活动状态时更改菜单颜色。

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/Projects时，它会激活项目选项卡。

所以它可以工作，但是当我在Site/Projects/Project1上时，我也希望项目选项卡保持激活状态。

- Mitch

---

你可以回答自己的问题，而不是编辑你的问题来发布答案。 - starbeamrainbowlabs

但是正如你所看到的，这还不是答案。 - Mitch

抱歉，我误解了“它能够工作”这句话的意思，以为你已经解决了这个问题。 - starbeamrainbowlabs

Answer 1

数组索引从零开始。但是您已经将for循环以count=1开始了。可能会导致问题。请更改以下代码并进行测试。

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

应该是

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

- Suresh Ponnukalai

---

现在它总是选择主页。所以当我在关于页面时，它会突出显示主页和关于页面。另外时间页面仍然无法工作！ - Mitch

Answer 2

好的，我用一点 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 感谢你的帮助！

- Mitch

---

当我正在编辑我的答案时，我发现了这个问题！很高兴你解决了它。编程愉快！ - Jay

Answer 3

我不知道你是否愿意在网页上使用jQuery。

但是，如果你愿意，这里有一个可能的解决方案：

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

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

location.pathname

并且如果它们匹配，则添加活动类。

- Jay

---

当我在我的index.php页面时，所有东西都变成了绿色。但是当我转到例如“关于我”或“时钟”等页面时，没有任何东西是绿色的。 - Mitch

我有我的index.php文件，然后我有像Time、About Me等文件夹。现在，当我在主页(index.php)上时，所有菜单项都会变成绿色。例如：http://portfoliomw.besaba.com/ - Mitch

试试这个：`$(function(){ var url = window.location.pathname, urlRegExp = new RegExp(url.replace(//$/,'') + "$"); $('#menu a').each(function(){ if(urlRegExp.test(this.href.replace(//$/,''))){ $(this).addClass('active'); } });});` - Jay

我认为这是因为URL没有路径名。它只是域名。如果只有一个页面无法正常工作，您可以将活动类硬编码到正确的菜单项中并删除脚本。 - Jay

我明白。谢谢你。不过有一件事。当我访问例如：Site/Projects 时，项目选项卡会被突出显示。但是当我访问 Site/Projects/Project1 时，没有任何东西被突出显示。 - Mitch