根据 URL 添加活动导航类 | CSS-Tricks

Mike

# 2012 年 7 月 17 日

我一直努力尝试让类似的东西在模板化的 HTML 网站上工作（服务器端 CSS 更新不可用）。菜单的结构比您的示例复杂一些。您的 CSS 技巧是否适用于这种结构？如果是，请务必告诉我，因为我卡住了。

Taufik Nurrohman

# 2012 年 7 月 18 日

纯 Javascript

<nav id="nav">
    ...
</nav>

(function() {
    var nav = document.getElementById('nav'),
        anchor = nav.getElementsByTagName('a'),
        current = window.location.pathname.split('/')[1];
        for (var i = 0; i < anchor.length; i++) {
        if(anchor[i].href == current) {
            anchor[i].className = "active";
        }
    }
})();

Andrés B

# 2020 年 3 月 4 日

酷！！！

另一种方式

function setNavigation() {
    let current_location = location.pathname.split('/')[1];
    if (current_location === "") return;
    let menu_items = document.querySelector("header").getElementsByTagName("a");
    for (let i = 0, len = menu_items.length; i < len; i++) {
      if (menu_items[i].getAttribute("href").indexOf(current_location) !== -1) {
        menu_items[i].className = "active";
      }
    }
  }
  setNavigation()

Rogerio Lucas

# 2022 年 6 月 2 日

这是基于 innerText URL 的正确替代版本

`

function setNavigation() {
let current_location = location.pathname.split(‘/’)[1]
if (current_location == ”) {
current_location = ‘home’
}

let menu_items = document
  .querySelector('header')
  .getElementsByClassName('navbar-menu')[0]
  .getElementsByTagName('li')

for (let i = 0, len = menu_items.length; i &lt; len; i++) {
  if (
    menu_items[i].getElementsByTagName(&#039;a&#039;)[0].innerText.toLowerCase() ===
    current_location
  ) {
    menu_items[i].className = &#039;is-active&#039;
  }
}

}
setNavigation()

`

mehdi

# 2012 年 9 月 5 日

感谢您的所有内容

Mark Johnson

# 2013 年 2 月 12 日

谢谢 Chris！简单、清晰且流畅。击掌！

Leon Gaban

# 2013 年 3 月 7 日

谢谢！我一直想要这样的东西：)

Don

# 2013 年 4 月 6 日

它运行得很好，但有一个例外。在主页上，类被添加到所有链接中。它们都以 / 开头。任何帮助都会不胜感激。

Don

评论的永久链接# 2013 年 7 月 21 日

简单的解决方法：不要在主页文件上使用脚本。Duh。：)
Michel

评论的永久链接# 2014 年 3 月 6 日

尝试用 href$= 替换 hrefˆ=

ˆ= 值以开头
$= 值以结尾
Peter

评论的永久链接# 2014 年 10 月 17 日

这就是我为适应“home”页面或“index”所做的操作。
if (location.pathname !== '/') { $("a[href*='" + location.pathname + "']").addClass("current"); } else { var home = document.getElementById("home").getElementsByTagName('a')[0]; home.className = 'current'; }

希望这有帮助。
Justin

评论的永久链接# 2015 年 12 月 15 日
我的导航中没有“/”，因此代码在主页上为我的所有链接添加了“active”类。在我的情况下，我做了以下操作，以便我的“/”路径不会运行代码
```
$(function() {
    if ((location.pathname.split("/")[1]) !== ""){
        $('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
    }
});
```

bgdbraba

# 2013 年 5 月 13 日

确实。以及例如被调用为 /about en /aboutsome 的页面，在您按下“about”时也都是“active”。对此有没有什么解决方案，比如某种精确匹配？

John

# 2013 年 9 月 29 日

嗨，

我无法使上述选择器工作，但使用了这个（特定于 PHP 的解决方案）来匹配当前 URL。

希望这能帮到某人（尚未经过彻底测试，因此可能有一些限制/意外结果）。

$(‘nav a[href=””]’).addClass(‘active’);

John

评论的永久链接# 2013 年 9 月 29 日

我上面的评论删除了 PHP，所以我将调整它，您在使用它时必须使用常识。
$('nav a[href="<?php echo "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; ? >"]').addClass('active');

mlotfi

# 2013 年 12 月 18 日

嗨，
我在这里是新手，您能提供一个有效的示例吗？
谢谢。

Luke Etheridge

# 2014 年 1 月 3 日

嗨，伙计们 - 有人知道如何使用绝对 URL（整个 URL）做到这一点吗？

我相信这很容易做到，但我真的不知道从代码的哪个地方开始...

谢谢，
Luke

ArtyPea

# 2015 年 11 月 12 日

$(function() {
    var nav = document.getElementById("sticky"),
        anchor = nav.getElementsByTagName("a"),
        current = window.location;

    console.log("anchor = ",anchor,"current = ",current);

    for (var i = 0; i < anchor.length; i++) {
    if(anchor[i].href == current) {
        anchor[i].className = "active";

    }

}
});

Ramesh Chowdarapally

# 2014 年 2 月 13 日

Chris，你能为此提供一个小型演示吗？

Ashok

# 2014 年 3 月 5 日

是的，这很有用……

Brian

# 2014 年 3 月 24 日

两个简单的问题

如果我的 URL 是动态的，我应该如何调整 javascript 的锚部分？
是否有纯 css 方法来显示上面显示的活动状态？我只是想问一下。我会为非 js 查看者使用悬停效果，以防有人想知道。

Wesley

# 2014 年 6 月 27 日

我的情况类似，但有所不同。当非子文档处于活动状态时，我需要使用活动类来定位特定的导航元素。有什么想法可以做到这一点吗？

Vita

# 2014 年 11 月 3 日

我实现了一个略有不同的方法。我试图找到与 URL 和当前位置最匹配的选项。为此创建了一个 jQuery 插件 https://github.com/Vitaa/ActiveNavigation

Anthony Candaele

评论的永久链接# 2017 年 3 月 27 日

运行得很好，非常感谢！

Kenneth Hodges

# 2017 年 7 月 12 日

你好！

我找到了一个用于在我的共享菜单上设置活动（当前）类的例程，但我需要修改它以仅设置父链接，而不是“最近”链接。它在没有子菜单的菜单项上运行良好，但在单击子菜单项后，页面加载后主菜单没有指示。（我需要修改的代码如下）

(function( $ ) {
    $.fn.activeNavigation = function(selector) {
        var pathname = window.location.pathname
        var extension_position;
        var href;
        var hrefs = []
        $(selector).find("a").each(function(){
            // Remove href file extension
            extension_position = $(this).attr("href").lastIndexOf('.');
            href = (extension_position >= 0) ? $(this).attr("href").substr(0, extension_position) : $(this).attr("href");

<code>        if (pathname.indexOf(href) > -1) {
            hrefs.push($(this));
        }
    })
    if (hrefs.length) {
        hrefs.sort(function(a,b){
            return b.attr("href").length - a.attr("href").length
        })
      hrefs[0].closest('li').addClass("current")
    }
}; })(jQuery);

Jonno

# 2015 年 7 月 9 日

您是否可以展示如何在 PHP 中执行此操作？

George v

# 2015 年 9 月 7 日

TKX
Vita

barrett fullerton

# 2016 年 2 月 9 日

快速更新，不确定是否有人说过，但如果您希望将它与将首页链接作为“/”一起使用

$(function() {
    if ((location.pathname.split("/")[1]) !== ""){
        $('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
    }
    else {
    $('nav li.home-link a').addClass('active');
    }
});

只需在 else 中对您的 home li 或 a 标签做一些区分即可。

Lukas

评论的永久链接# 2016 年 4 月 29 日

非常感谢您分享这个！帮助我很多；)

Alio

# 2016 年 6 月 6 日

非常感谢！帮助我很多！

Esen

# 2016 年 12 月 19 日

我使用原生 JS 有这个解决方案，但我遇到了问题。URL 中的哈希（#）比活动类更改得慢。所以我单击第一个链接，什么也没有发生，然后我单击第二个链接，第一个链接获得了活动类。

<script>
    document.addEventListener("DOMContentLoaded", function(event) { 
        console.log("Oh, Hello.");

        //Preselect all the links 
        var links =  document.querySelectorAll('.nav-class-link');

        // Connect the links event-click with the event handler
        for (var i = links.length - 1; i >= 0; i--) {
            links[i].addEventListener('click', updateLinksActiveState);
        }

        //Event Handler
        function updateLinksActiveState(){  
            //Check for the active one
            for (var i = links.length - 1; i >= 0; i--) {
                if(links[i].href.split("#")[1] == location.hash.split("#")[1]){
                    links[i].classList.add('active');
                }else{
                    links[i].classList.remove('active');
                }
            }
        }
    });
    </script>

neeta

# 2017 年 3 月 22 日

嗨，

我有一个相反的情况。

如果我不想在子菜单项处于活动状态时突出显示父菜单怎么办？

例如

关于我们 - 无颜色
– 链接 1
– 链接 2（当前处于活动状态）：希望它有某种颜色

有什么线索吗？

非常感谢

Aryan Malik

# 2017 年 11 月 19 日

试试这个。

$(function() {
  var url = location.origin + location.pathname;
  $('nav a[href^="' + url + '"]')
    .css({
        'background': '#fff',
        'color' : '#c02f2f'
      });
});

Aryan Malik

# 2017 年 11 月 19 日

我试了这段代码，效果很好。

$(function() {
  var url = location.origin + location.pathname;
  $('nav a[href^="' + url + '"]')
    .closest('li')
    .addClass('active');
});

Bekzat Sadykov

评论永久链接# 2017 年 12 月 8 日

谢谢 Aryan，你的代码对我非常有用。

Huy

# 2017 年 12 月 7 日

它起作用了！！感谢你的分享

Luis

# 2018 年 1 月 12 日

很棒的帖子和技巧。我会在这里留下我的贡献。对于那些在使用参数匹配 URL 时遇到问题的人，这里有一个解决方案（代码将 CLASS 添加到父 LI 标签，而不是像原始帖子那样添加到 A 标签）

$(function() {
var url = window.location.href; url = url.replace(/^.*\/\/[^\/]+/, ”);
$(‘nav a[href$=”‘ + url + ‘”]’).closest(‘li’).addClass(‘active’);
});

Thierry

# 2019 年 2 月 1 日

更短的语法（在这种情况下，我将 active 类应用于 li，而不是 a）

let loc = location.pathname.split(“/”)[1];

document.querySelector(‘nav a[href^=”/’ + loc + ‘”]’).closest(‘li’).classList.add(‘active’);

Greg Raven

# 2020 年 12 月 6 日

或者，你可以尝试以下方法

<nav>
    <a href="/index.html" id="homepage">Home</a>
    <a href="/about.html" id="about">About</a>
    <a href="/clients/index.html" id="clients">Clients</a>
    <a href="/contact/index.html" id="contact">Contact Us</a>
</nav>

<script>
    switch (!0) {
      case /about/.test(window.location.pathname):
        document.getElementById("about").classList.add("active");
        break;
      case /clients/.test(window.location.pathname):
        document.getElementById("clients").classList.add("active");
        break;
      case /contact/.test(window.location.pathname):
        document.getElementById("contact").classList.add("active");
        break;
      default:
        document.getElementById("homepage").classList.add("active");
    }
</script>

Dayle Senior

# 2021 年 4 月 22 日

嗨，Chris，
我有一个菜单，其中所有链接都是唯一的域名。我使用类似于您的方法，它效果很好

jQuery(function($) {
    var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
    $('.nav a').each(function() {
        if (this.href === path) {
            $(this).addClass('current-link');
        }
    });
});

但问题是，如果地址栏 = http://www.mysite.com，它就起作用，但如果地址栏 = mysite.com/cat/，它就不起作用。

我需要我的方法只读取域名，忽略其后的任何内容。

有什么想法吗？

haseeb

# 2023 年 1 月 10 日

jQuery(document).ready(function($){
// 获取当前路径并查找目标链接
var path = window.location.pathname.split(“/”).pop();

// 考虑路径为空的主页
if ( path == ” ) {
path = ‘index.php’;
}

var target = $(‘nav a[href=”‘+path+'”]’);
// 将 active 类添加到目标链接
target.addClass(‘active’);

});

评论

发表评论 取消回复

发表评论取消回复