通過打開的網址標記菜單按鈕

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>