Compare the href link with the address for the menu state

Question

I am working on the correct menu and I want to save this state with the link tag hrefwith the location of the addresses.

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

The problem is that the code does not recognize the same addresses in oneul

for example, both bottom elements give a class active-item.

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

also here is my 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

• Fix: $(".sidebar-menu li ul a")before$(".sidebar-menu ul li a")

• I changed the path matching method, check it out:

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

Run codeHide result

Answer 2

You can try the indexOfmethod:

if (href.indexOf(path.substring(0, href.length)) !== -1) {
   ...

Example:

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

.active-item {
  color: #ff0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sidebar-menu">
    <li>
        <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/City">/Panel/Place/City</a></li>
            <li><a href="/Panel/Definitions/Attribute">/Panel/Definitions/Attribute</a></li>
            <li><a href="/Panel/TouristDestination">/Panel/TouristDestination</a></li>
        </ul>
    </li>
</ul>

Run codeHide result