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。与打开的网址匹配的链接href应该会添加该类。

错误： -

“indexOf（）不是函数”

我目前得到此错误。发生了什么事？

Answer 1

您需要使用.attr("href")并同时检查!= -1

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

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

＆＃13;

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");
    }
});

＆＃13;

.focused{color: red}

＆＃13;

<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>

＆＃13;

通过打开的URL标记菜单按钮

1 个答案: