将 <li> 项设置为在导航到特定页面时处于活动状态

【问题标题】：Set <li> item as active on navigating to particular page将 <li> 项设置为在导航到特定页面时处于活动状态
【发布时间】：2019-03-24 19:36:23
【问题描述】：

我在一个 Asp.Net 网站上工作，在该网站上，我将 Site.Master 中的默认水平导航栏替换为 AdminLTE 示例中可用的导航栏。 AdminLTE Example.

垂直导航栏是这样的

导航栏的代码如下

<ul class="sidebar-menu" data-widget="tree">
                <li class="header">Navigation</li>
                <!-- Optionally, you can add icons to the links -->
                <li>
                    <a href="Default.aspx">
                        <i class="fa fa-home"></i>
                        <span>Home</span>
                    </a>
                </li>
                <li>
                    <a href="About.aspx">
                        <i class="fa fa-question"></i>
                        <span>About</span>
                    </a>
                </li>
                <li>
                    <a href="Contact.aspx">
                        <i class="fa fa-address-book"></i>
                        <span>Contact</span>
                    </a>
                </li>
                <li class="treeview">
                    <a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
                        <span class="pull-right-container">
                            <i class="fa fa-angle-left pull-right"></i>
                        </span>
                    </a>
                    <ul class="treeview-menu">
                        <li><a href="#">Link in level 2</a></li>
                        <li><a href="#">Link in level 2</a></li>
                    </ul>
                </li>
            </ul>

一旦用户导航到该特定页面，我想将列表项类设置为活动。例如，如果用户点击 About 链接，它将被重定向到 about 页面，然后在该页面上，about 链接的类应更改为 active

我尝试使用这个特定的脚本，但它不适合我

$(function() {
 var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
 $("ul li a").each(function(){
      if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
      $(this).addClass("active");
 })

});

不知道我错过了什么。

【问题讨论】：

• 似乎对我有用，但为了排除故障，我建议检查 pgurl 的值以确保它符合您的预期，例如console.log(pgurl);.
• 访问“关于” website.com/about 后，您的链接是什么样的？
• 我刚刚注意到您说要设置“列表项”类。在您的代码中，您设置的是<a> 的类，而不是<li>。你是这个意思吗？如果是这样，请参阅parent()。
• @Innervisions 其 localhost:5583/About.aspx
• @showdev 我想将
• 类设置为活动