Question

我试图将突出显示类选入我的类别：

这是我的代码：

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

当我点击电子类别时，它会显示突出显示类。选择，但是，当网址页面更改到category.php？c =时会出现问题电子＆安培;页= 2

突出显示类。选择不再显示，如何修改此jQuery，那么，它会再次显示？我找到了JavaScript 拆分网址文章，是否可以解决此问题？

Answer 1

请改用.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>

Answer 2

你可以使用 .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>

添加类选择的相对URL

2 个答案: