javascript - 将链接 href 与菜单状态的地址路径进行比较

Question

我正在处理右侧菜单，我想通过比较链接 href 标记和地址路径位置来保存该状态。

function setNavigation() {
            var path = window.location.pathname;
            path = path.replace(/\/$/, "");
            path = decodeURIComponent(path);
      $(".sidebar-menu li ul a").each(function () {
                var href = $(this).attr('href');
                if (path.substring(0, href.length) === href) {
                    $(this).addClass('active-item');
                }
            });

问题是代码无法识别一个ul

中的相似地址

例如下面的两个项目都给 active-item 类。

href="site/city/company/"
href="site/city/company/sample"

还有我的html

 <li><a href="/Panel/Place" class="active-item"></a></li>
 <li><a href="/Panel/Place/item" class="active-item"></a></li>
 <li><a href="/Panel/Place/City"></a></li>
 <li><a href="/Panel/Definitions/Attribute">/a></li>
 <li><a href="/Panel/TouristDestination"></a></li>

Answer 1

1. 正确:$(".sidebar-menu li ul a") 到 $(".sidebar-menu ul li a")

2. 我更改了路径匹配方式，查看一下:

//sample path
var root_path = "www.xyz.com/";

function setNavigation(path) {
  path = path.substring(path.indexOf("/"), path.length);
  path = decodeURIComponent(path);
  $(".sidebar-menu ul li a").removeClass('active-item');
  $(".sidebar-menu ul li a[href='" + path + "']").addClass('active-item');
}

$("a").click(function(e) {
  e.preventDefault();
});

$("#navigate").click(function() {
  var path = root_path + $("#path").val();
  setNavigation(path);
});

$("#navigate").click();

.active-item {
  color: #eee;
  background-color: #0095ff;
}
ul {
  width: 80%;
}
li {
  display: block;
  margin: 5px;
}
li a {
  display: block;
  border: 1px solid #888;
  padding: 5px;
}
.center {
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center">
  <p>
    <b>Path :</b> 
    www.xyz.com/
    <input id="path" value="Panel/Place/item"/> 
    <input type="button" value="Navigate" id="navigate"/>
  </p>
</div>
<div class="sidebar-menu">
  <ul>
    <li><a href="/Panel/Place">/Panel/Place</a></li>
    <li><a href="/Panel/Place/item">/Panel/Place/item</a></li>
    <li><a href="/Panel/Place/item/City">/Panel/Place/item/City</a></li>
    <li><a href="/Panel/Definitions/Attribute">/Panel/Definitions/Attribute</a></li>
    <li><a href="/Panel/TouristDestination">/Panel/TouristDestination</a></li>
  </ul>
</div>