如何使用 jquery 或 javascript 在 asp.net webforms masterpage 中激活当前菜单项

Question

如何激活当前菜单

即如果我选择并转到该页面，则下拉菜单需要在 asp .net c# 中动态激活（<li class="active treeview">）。

我想在 c# 中使用 jquery 或 javascript。

所有左侧下拉列表都在母版页中可用。

      <li class="treeview" id="settingId" runat="server">
                            <a href="#">
                                <i class="fa fa-files-o"></i>
                                <span>SETTING</span>

                            </a>
                            <ul class="treeview-menu">
                                <li><a href=""><i class="fa fa-circle-o"></i>CATEGORY MANAGEMENT</a></li>
                                <li><a href=""><i class="fa fa-circle-o"></i>ADD CATEGORY</a></li>
                                <li><a href=""><i class="fa fa-circle-o"></i>EMAIL MANAGEMENT</a></li>
                                <li><a href=""><i class="fa fa-circle-o"></i>CHANGE PASSWORD</a></li>
                            </ul>
                        </li>
 <li class="treeview" id="portfolioId" runat="server">
                        <a href="#">
                            <i class="fa fa-pie-chart"></i>
                            <span>PORTFOLIO</span>
                            <i class="fa fa-angle-left pull-right"></i>
                        </a>
                        <ul class="treeview-menu">
                            <li><a href=""><i class="fa fa-circle-o"></i>PROJECT MANAGEMENT</a></li>
                            <li><a href=""><i class="fa fa-circle-o"></i>ADD PROJECT</a></li>
                            <li><a href=""><i class="fa fa-circle-o"></i>PRODUCT MANAGEMENT</a></li>
                            <li><a href=""><i class="fa fa-circle-o"></i>ADD PRODUCT</a></li>
                        </ul>
                    </li>

Answer 1

您可以在母版页中放置一个隐藏字段，该字段包含当前选项卡的 id（父 li）。然后在内容页面中设置该隐藏字段的值。

使用隐藏字段的值来确定要突出显示的选项卡。此代码假定父 ul 具有 id="MasterMenu" 并且 not 具有 runat="server"。还有隐藏字段有id="CurrentTab"。

function highlightTab() {
    var currentTab;

    //Get the id of the current tab from the hidden field
    currentTab = $('#CurrentTab').val();

    if (currentTab !== null) {
        //Remove the active-treeview class from all top level li elements
        $('#MasterMenu').children('li').removeClass('active-treeview');

        //Set the active-treeview class to the current tab
        $('#' + currentTab).addClass('active-treeview');
    }
}

编辑：
这是您将放在母版页上的隐藏字段的示例。我通过添加runat="server" 属性使其可用于后面的代码。当控件具有runat="server" 时，.NET 将在呈现页面时重命名 id。要停止这种行为，以便您可以轻松访问 JavaScript 中的隐藏字段，请添加 ClientIDMode="static" 属性。

<asp:HiddenField id="CurrentTab" value="" runat="server" ClientIDMode="static" />

在内容页面的页面加载事件中，将该隐藏字段的值设置为要为该页面突出显示的选项卡的 ID。

HiddenField currentTab;
currentTab = (HiddenField)this.Master.FindControl("CurrentTab");
currentTab.Value = "settingId";

Answer 2

在每个页面中需要改变当前id（假设leftsidebar_settingId）

  <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                debugger;
                //$('#leftsidebar_portfolioId').addClass('treeview');
                $('#leftsidebar_settingId').addClass('treeview active');
            });

        </script>