locked
Add class active menu item RRS feed

  • Question

  • User31164289 posted

    I have a web application build with ASP.NET webform that uses Javascript to make the selected item active in the menu.

    To obtain this result, the system compares the URL visited and the one present in the URL of the selected menu. If they match, the ACTIVE class is added.

     // activate the menu in left side bar based on url
            $("#side-menu a").each(function () {
                var pageUrl = window.location.href.split(/[?#]/)[0];
                if (this.href == pageUrl) {
                    $(this).addClass("active");
                    $(this).parent().addClass("active"); // add active to li of the current link
                    $(this).parent().parent().addClass("in");
                    $(this).parent().parent().prev().addClass("active"); // add active class to an anchor
                    $(this).parent().parent().parent().addClass("active");
                    $(this).parent().parent().parent().parent().addClass("in"); // add active to li of the current link
                    $(this).parent().parent().parent().parent().parent().addClass("active");
                }
            });

    My problem is that the visited page is not always present in the menu. For example: I have a page (Product list) in the menu. When selected this item ACTIVE  class was added. 

    If I need more details on a product, I click on the list to view the page with the details. This page was not in menu so no menu item was active.

    How can I solve?

    Is there a way to leave the previous active menu item selected?

    Tuesday, January 26, 2021 10:44 AM

All replies

  • User-939850651 posted

    Hi clembo67,

    According to your description, Are you using Bootstrap Collapse, or something similar? I am not sure about the problem you are currently experiencing. The script code is not working?

    If this is the case, you could put these code in jQuery ready() function, here is a simple demo (test on the same page):

    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-3.5.1.min.js"></script>
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <script src="Scripts/bootstrap.min.js"></script>
        <style>
            .active {
                color: #ff0000;
            }
        </style>
        <script>
            $(function () {
                $("#multiCollapseExample1 a").each(function () {
                    var pageUrl = window.location.href.split(/[?#]/)[1];
                    if (pageUrl != null) {
                        $('#multiCollapseExample1').addClass('show');
                    }
    
                    if (this.href.split(/[?#]/)[1] == pageUrl) {
                        $(this).addClass("active");
                        $(this).parent().addClass("active"); // add active to li of the current link
                        //$(this).parent().parent().addClass("in");
                        //$(this).parent().parent().prev().addClass("active"); // add active class to an anchor
                        //$(this).parent().parent().parent().addClass("active");
                        //$(this).parent().parent().parent().parent().addClass("in"); // add active to li of the current link
                        //$(this).parent().parent().parent().parent().parent().addClass("active");
                    }
                });
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="container-fluid">
                <p>
                    <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Menu</a>
                </p>
    
                <ul id="multiCollapseExample1" class="collapse multi-collapse">
                    <li><a href="https://localhost:xxxxx/demo.aspx?id=1">content1</a></li>
                    <li><a href="https://localhost:xxxxx/demo.aspx?id=2">content2</a></li>
                    <li><a href="https://localhost:xxxxx/demo.aspx?id=3">content3</a></li>
                </ul>
            </div>
        </form>
    </body>

    Result:

    Or does it mean that the code works but does not get the desired result? If possible, please post the relevant page code and script code.

    Best regards,

    Xudong Peng

    Wednesday, January 27, 2021 6:57 AM