根据网址激活左侧栏上的菜单

Question

I have two different pages with a common sidebar menu. When I click on the menu, it will redirect to another page and a class should be added to the parent menu. Even when I refresh the page.

Check this code

Here is my js code:

$(document).ready(function () {
     $("#sidebar-menu a").each(function () {
         var pageUrl = window.location.href.split(/[?#]/)[0];

         console.log(pageUrl);

         if (this.href == pageUrl) {
             $(this).addClass("active");
             $(this).parent().addClass("active"); // add active to li of the current link
             $(this).parent().parent().prev().addClass("active"); // add active class to an anchor
             $(this).parent().parent().parent().parent().prev().click();
             $(this).parent().parent().prev().click(); // click the item to make it drop
         }
    });
});

Answer 1

menuother.html

    <link rel="stylesheet" href="http://themepixels.me/slim1.1/css/slim.css">
    <style>


    </style>

    <div class="slim-sidebar">
        <label class="sidebar-label">Navigation</label>

        <ul class="nav nav-sidebar">
            <li class="sidebar-nav-item with-sub">
                <a href="" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Dashboard</a>
                <ul class="nav sidebar-nav-sub">
                    <li class="nav-sub-item"><a href="menu.html" class="nav-sub-link menu" data-number='1' >Page 01</a></li>
                    <li class="nav-sub-item"><a href="" data-number='2'  class="nav-sub-link menu">Page 02</a></li>
                    <li class="nav-sub-item"><a href="" data-number='3' class="nav-sub-link menu">Page 03</a></li>
                    <li class="nav-sub-item"><a href="" data-number='4' class="nav-sub-link menu">Page 04</a></li>
                    <li class="nav-sub-item"><a href="" data-number='5' class="nav-sub-link menu">Page 05</a></li>
                </ul>
            </li>
            <li class="sidebar-nav-item with-sub">
                <a href="" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Menu</a>
                <ul class="nav sidebar-nav-sub">
                    <li class="nav-sub-item"><a href="menuother.html" data-number='6' class="nav-sub-link menu">Menu 01</a></li>
                    <li class="nav-sub-item"><a href="" data-number='7' class="nav-sub-link menu">Menu 02</a></li>
                    <li class="nav-sub-item"><a href="" data-number='8' class="nav-sub-link menu">Menu 03</a></li>
                    <li class="nav-sub-item"><a href="" data-number='9' class="nav-sub-link menu">Menu 04</a></li>
                    <li class="nav-sub-item"><a href="" data-number='10'  class="nav-sub-link menu">Menu 05</a></li>
                </ul>
            </li>
            <li class="sidebar-nav-item with-sub">
                <a href="" class="sidebar-nav-link"><i class="icon ion-ios-book-outline"></i> Pages</a>
                <ul class="nav sidebar-nav-sub">

                    <li class="nav-sub-item sub-with-sub">
                        <a href="#" class="nav-sub-link">Pricing</a>
                        <ul>
                            <li class="sub-sub-link"><a href="" >Pricing 01</a></li>
                            <li class="sub-sub-link"><a href="">Pricing 02</a></li>
                            <li class="sub-sub-link"><a href="">Pricing 03</a></li>
                        </ul>
                    </li>

                </ul>
            </li>
        </ul>
    </div>

    Hi
    <!-- slim-sidebar -->
    <script src="http://themepixels.me/slim1.1/lib/jquery/js/jquery.js"></script>
    <script src="main.js"></script>
    <script type="text/javascript">

         $(".menu").click(function(){
              localStorage.setItem("menu", this.getAttribute('data-number'));
         });


         // For default Activation 
          var data = localStorage.getItem('menu');
          if(!data)
                localStorage.setItem("menu", 1);
         console.log("Default Configuration ");
         console.log(data);
         // console.log( $('.menu').eq(data).html());
         console.log( $('.menu').eq(data-1).css({background: 'red'}));
         $('.menu').eq(data-1).parent().parent().prev().css({background: 'red'})

    </script>

menu.html

        </style>

        <div class="slim-sidebar">
            <label class="sidebar-label">Navigation</label>

            <ul class="nav nav-sidebar">
                <li class="sidebar-nav-item with-sub">
                    <a href="" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Dashboard</a>
                    <ul class="nav sidebar-nav-sub">
                        <li class="nav-sub-item"><a href="menu.html" class="nav-sub-link menu" data-number='1' > Page 01 </a></li>
                        <li class="nav-sub-item"><a href="" data-number='2'  class="nav-sub-link menu">Page 02</a></li>
                        <li class="nav-sub-item"><a href="" data-number='3' class="nav-sub-link menu">Page 03</a></li>
                        <li class="nav-sub-item"><a href="" data-number='4' class="nav-sub-link menu">Page 04</a></li>
                        <li class="nav-sub-item"><a href="" data-number='5' class="nav-sub-link menu">Page 05</a></li>
                    </ul>
                </li>
                <li class="sidebar-nav-item with-sub">
                    <a href="" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Menu</a>
                    <ul class="nav sidebar-nav-sub">
                        <li class="nav-sub-item"><a href="menuother.html" data-number='6' class="nav-sub-link menu">Menu 01</a></li>
                        <li class="nav-sub-item"><a href="" data-number='7' class="nav-sub-link menu">Menu 02</a></li>
                        <li class="nav-sub-item"><a href="" data-number='8' class="nav-sub-link menu">Menu 03</a></li>
                        <li class="nav-sub-item"><a href="" data-number='9' class="nav-sub-link menu">Menu 04</a></li>
                        <li class="nav-sub-item"><a href="" data-number='10'  class="nav-sub-link menu">Menu 05</a></li>
                    </ul>
                </li>
                <li class="sidebar-nav-item with-sub">
                    <a href="" class="sidebar-nav-link"><i class="icon ion-ios-book-outline"></i> Pages</a>
                    <ul class="nav sidebar-nav-sub">

                        <li class="nav-sub-item sub-with-sub">
                            <a href="#" class="nav-sub-link">Pricing</a>
                            <ul>
                                <li class="sub-sub-link"><a href="" >Pricing 01</a></li>
                                <li class="sub-sub-link"><a href="">Pricing 02</a></li>
                                <li class="sub-sub-link"><a href="">Pricing 03</a></li>
                            </ul>
                        </li>

                    </ul>
                </li>
            </ul>
        </div>
        <!-- slim-sidebar -->
        <script src="http://themepixels.me/slim1.1/lib/jquery/js/jquery.js"></script>
        <script src="main.js"></script>
        <script type="text/javascript">

              $(".menu").click(function(){
                  localStorage.setItem("menu", this.getAttribute('data-number'));
             });


             // For default Activation 
              var data = localStorage.getItem('menu');
              if(!data)
                    localStorage.setItem("menu", 1);
             console.log("Default Configuration ");
             console.log(data);
             console.log( $('.menu').eq(data-1).css({background: 'red'}));
             $('.menu').eq(data-1).parent().parent().prev().css({background: 'red'})
        </script>

Actually, You give me only html and js code so I used the local storage for this solution. you can solve this problem using many way.