重定向到另一个页面时如何将“活动”类保留为 li 标签？答案

【问题标题】：How to keep 'active' class to li tag when redirect to another page?重定向到另一个页面时如何将“活动”类保留为 li 标签？
【发布时间】：2017-08-31 11:20:32
【问题描述】：

我有 2 个菜单管理类别和管理产品，点击时它变为“活动”。问题是，管理产品菜单下有“添加产品”按钮，当我去添加产品页面菜单“管理产品”时，不要保持“活动”。

<aside class="main-sidebar">
    <section class="sidebar">
        <ul class="sidebar-menu">
            <li>
                <a href="manage_category.php">
                <i class="fa fa-table"></i> <span>Manage category</span>
                </a>
            </li>
                <li>
                <a href="manage_products.php">
                <i class="fa fa-table"></i> <span>Manage products</span>
                </a>
            </li>
        </ul>
    </section>
    <!-- /.sidebar -->
</aside>
<script type="text/javascript">

$(document).ready(function() {
    var url = window.location;
    // for sidebar menu entirely but not cover treeview
    $('ul.sidebar-menu a').filter(function() {
        return this.href == url;
    }).parent().addClass('active');
});
</script>

【问题讨论】：

向我们展示您的Add Products的html代码
“添加产品”页面有什么不同吗？还是仅在“管理产品”页面中？如果不同，则 url 不匹配并且不会添加类。
你必须有一个规则告诉系统哪些页面被认为是“管理产品”菜单的一部分。目前，它对当前 URL 进行简单匹配。如果 URL 与菜单项的 href 不匹配，则不会突出显示为活动的。要么确定可以匹配它们的模式（例如，文件名中存在短语“产品”将在您非常简单的示例中起作用），或者您必须在某处有某种页面列表，将它们映射到哪个菜单访问该页面时应突出显示项目，以及一些用于读取列表并采取相应措施的代码
@AsfandyarKhan ：问题出在上面的 jquery 代码中，“添加产品”是不同的页面，仅包含用户添加产品详细信息并重定向到“管理产品”页面的表单。所以当用户在“添加产品”页面上工作时，我需要保持活跃的“管理产品”菜单
@bharatparmar 检查我的答案

标签： php jquery adminlte

【解决方案1】：

您可以在菜单中为“添加产品”添加隐藏链接

<li>
 <a href="manage_products.php">
  <i class="fa fa-table"></i> <span>Manage products</span>
 </a>
 <a href="add_product.php" style="display:none"></a>
</li>

你的 javascript 代码应该可以正常工作

【讨论】：

【解决方案2】：

您的 window.location 不仅返回页面，还返回整个 url。

这是有效的：

$(document).ready(function() {
    var url = location.pathname.split('/').slice(-1)[0];
    jQuery('ul.sidebar-menu a').each(function() {
        if($(this).attr('href') == url)
            $(this).parent().addClass('active');
    });
});

【讨论】：

在“管理产品”页面上有产品列表，在列表中我有“添加产品”按钮。单击它时，用户重定向到“添加产品”页面，该页面仅包含用户添加产品详细信息并重定向到“管理产品”页面的表单。所以当用户在“添加产品”页面上工作时，我需要保持活跃的“管理产品”菜单
我明白你想做什么。请再试一次，我对代码做了一些修改。
感谢您的尝试，但需要告诉您，我的 ul li 标签 (<ul class="sidebar-menu">) 中没有菜单名称“add_product.php”。我在此页面上有主菜单名称“manage_product.php”我有按钮添加产品等添加产品页面我想保持我的主菜单名称“活动”

【解决方案3】：

我怀疑 url (window.location) != this.href 在您的过滤器中。

this.href 将是例如manage_products.php 但 window.location 是一个对象。（查看 MDN 文档以获取 window.location）。 https://developer.mozilla.org/en-US/docs/Web/API/Location

即使是 window.location.href 也会给你完整的 url。但 - window.location.pathname 可能与您想要的很接近。

如果你在这一行调试你的代码：return this.href == url;并检查您将看到问题的值。

【讨论】：

【解决方案4】：

如果“添加产品”不是不同的页面，那么试试下面的代码。

var parameter = Sys.WebForms.PageRequestManager.getInstance();
parameter.add_endRequest(function () {
var url = window.location;

    // for sidebar menu entirely but not cover treeview
    $('ul.sidebar-menu a').filter(function() {
    return this.href == url;
    }).parent().addClass('active');

})

【讨论】：

不，“添加产品”是一个不同的表单页面，用于添加产品详细信息并重定向到“管理产品”页面。
我不明白 URL 会和你点击“管理产品”时的一样吗？
不，网址会像 www.abc.com/manage_products.php 不同，并且在此页面上有一个“添加产品”按钮，当它点击重定向到 www.abc.com/add_products.php 时，因此，即使用户在“添加产品”上添加产品，我也希望菜单“管理产品”处于活动状态