添加类选择的相对URL - Add class selected relative URL

Add class selected relative URL

本文关键字：相对 URL 选择添加 | 更新日期: 2023-09-27

我正在尝试使高亮类选择到我的类别:

这是我的代码:

<div id="category">
    <ul>
        <a href="category.php?c=electronic">
            <li>Electronic</li>
        </a>
        <a href="category.php?c=fashion">
            <li>Fashion</li>
        </a>
    </ul>
</div>

CSS:

.selected {border-bottom:3px solid red; }

脚本:

$("#category ul a").each(function(){
    if ($(this).attr("href") == window.location.href){
        $(this).addClass("selected");
    }     
});

当我点击电子类时，它会显示高亮类。选择，但是，当URL页面将更改为category.php?c=electronic&page=2

时，问题出现了。

Highlight class .selected不再显示，如何修改这个jQuery，让它再次显示?我发现JavaScript 拆分URL文章，它是否适用于这个问题?

使用。indexof代替。

var url = $(this).attr("href");
var windowURL = window.location.href;
if (windowURL.indexOf(url) != -1){
  $(this).addClass("selected");
}

$("#category ul a").each(function() {
  var url = $(this).attr("href");
  var windowURL = "category.php?c=electronic&page=2";
  console.log(windowURL, url, windowURL.indexOf(url)); // <--- see how the values change
  if (windowURL.indexOf(url) != -1) {
    $(this).addClass("selected");
  }
});

.selected {
  color: red;
  border-bottom: 3px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="category">
  <ul>
    <a href="category.php?c=electronic">
      <li>Electronic</li>
    </a>
    <a href="category.php?c=fashion">
      <li>Fashion</li>
    </a>
  </ul>
</div>

您可以使用.indexof()函数检查url中字符串是否存在

这里我已经更新了你的代码:

$("#category ul a").each(function(){
    if (window.location.href.indexOf($(this).attr("href")) > -1){
        $(this).addClass("selected");
    }     
});

.selected {border-bottom:3px solid red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="category">
    <ul>
        <a href="category.php?c=electronic">
            <li>Electronic</li>
        </a>
        <a href="category.php?c=fashion">
            <li>Fashion</li>
        </a>
    </ul>
</div>