通过打开的网址标记菜单按钮

Question

我有一个网站nav菜单。

<nav> 
    <h1>Menu:</h1> <br> 
    <a href="/tests/add-new-test-link">Add link</a> 
    <a href="/tests/run-tests">Run tests</a> 
    <a href="/tests/reports-history">Test reports history</a> 
    <a href="/tests/links-list">Links list</a> 
</nav> 

现在，取决于打开的页面，我想添加一些样式的类到按下的按钮。因此，用户将知道他们实际上在哪个页面上。由于按下按钮正在重新加载网站，我想在页面加载后根据当前打开的URL转换按钮。

var currentUrl = window.location.href; 
var hrefCheck = currentUrl.split('/').pop(); 

$("nav").find("a").each(function() { 
    if ($(this).indexOf(hrefCheck)) { 
    $(this).addClass("focused"); 
    } 
}); 

在上面的脚本中，当前打开的URL被切断，等同于按钮链接的href。匹配打开的url的链接href应该会添加类。

错误： -

"indexOf() is not a function"

这个错误我目前得到。发生什么事？

Answer 1

你需要使用.attr("href")并检查这样!= -1

$(this).attr("href").indexOf(hrefCheck) != -1

如果hrefCheck不存在$(this).attr("href")那么它会返回-1

var currentUrl = window.location.href; 
 
var hrefCheck = currentUrl.split('/').pop(); 
 

 
$("nav").find("a").each(function() { 
 
    if ($(this).attr("href").indexOf(hrefCheck) != -1) { 
 
     $(this).addClass("focused"); 
 
    } 
 
});

.focused{color: red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <h1>Menu:</h1> <br> 
 
    <a href="/tests/js">Add link</a> 
 
    <a href="/tests/run-tests">Run tests</a> 
 
    <a href="/tests/reports-history">Test reports history</a> 
 
    <a href="/tests/links-list">Links list</a> 
 
</nav>