无法将与当前打开页面匹配的活动类添加到菜单列表项

Posted 2023-05-08

【中文标题】无法将与当前打开页面匹配的活动类添加到菜单列表项

【英文标题】：Not able to add active class that matches current open page to list item of menu

【发布时间】：2019-05-01 23:24:33

【问题描述】：

我在将活动类添加到当前打开的页面时遇到问题。我尝试了 *** 上可用的其他解决方案，但对我没有任何帮助。我认为这是因为我的链接 href 元素中有 ~/ 。提前致谢。

    <script>
           $(document).ready(function () 
               var current = location.pathname;
               $('#indexmenu li a').each(function () 
                   var $this = $(this);
                   if ($this.attr('href').indexOf(current) !== -1) 
                       $this.addClass('active')
                   
               )         
            )
    </script>


<div class="navbar-collapse collapse mancolor" id="adminmenu">
  <ul class="nav navbar-nav mancolor" id="indexmenu">
    <li><a href="~/Default.aspx" class="active" runat="server">
       <span><i class="glyphicon glyphicon-dashboard"></i></span>
       <span>Main Screen</span>
       </a>
    </li>
    <li><a href="NewWorkShopVisit.aspx"  runat="server">
        <span class="fa fa-shopping-cart"></span>
        <span>New Workshop Visit</span>
        </a>
    </li>
    <li><a href="Index.aspx" runat="server">
       <span><i class="fa fa-cogs"></i></span>
       <span>Workshop Control Panel</span>
       </a>
    </li>
    <li><a href="Employees.aspx" runat="server">
        <span><i class="fa fa-user-circle-o"></i></span>
        <span>Employees</span>
       </a>
    </li>
 </ul>
</div>

【参考方案1】：

您可以检查第一个字符是否为~，如果是，则返回没有它的字符串：

$(document).ready(function () 
    var current = location.pathname;
    $('#indexmenu li a').each(function () 
        var $this = $(this);
        var href = $this.attr('href');
        if (href.charAt(0) === '~') href = href.substr(1);
        if (href.indexOf(current) !== -1) 
            $this.addClass('active')
        
    )
)

$(document).ready(function() 
  var current = '/Default.aspx'
  $('#indexmenu li a').each(function() 
    var $this = $(this);
    var href = $this.attr('href');
    if (href.charAt(0) === '~') href = href.substr(1);
    if (href.indexOf(current) !== -1) 
      $this.addClass('active')
    
  )
)

.active 
  color: red;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar-collapse collapse mancolor" id="adminmenu">
  <ul class="nav navbar-nav mancolor" id="indexmenu">
    <li>
      <a href="~/Default.aspx" runat="server">
        <span><i class="glyphicon glyphicon-dashboard"></i></span>
        <span>Main Screen</span>
      </a>
    </li>
    <li>
      <a href="NewWorkShopVisit.aspx" runat="server">
        <span class="fa fa-shopping-cart"></span>
        <span>New Workshop Visit</span>
      </a>
    </li>
    <li>
      <a href="Index.aspx" runat="server">
        <span><i class="fa fa-cogs"></i></span>
        <span>Workshop Control Panel</span>
      </a>
    </li>
    <li>
      <a href="Employees.aspx" runat="server">
        <span><i class="fa fa-user-circle-o"></i></span>
        <span>Employees</span>
      </a>
    </li>
  </ul>
</div>