Flex
150
18
Laravel

How to highlight current menu item in bootstrap?

Posted 4 months ago by Flex

working with laravel 5.6 and I have following sidebar.blade.php file sidebar.blade.php


<style type="text/css">
.list-group {
     
     margin:auto;
     float:left;
     padding-top:20px;
    }
    .lead {
     
     margin:auto;
     left:0;
     right:0;
     padding-top:10%;
    }
</style>

 <div class="list-group">
   
    <a href="#" class="list-group-item active"><i class="fa fa-key"></i> <span>App Settings</span></a>
    <a href="{{route('vehicles.myads')}}" class="list-group-item" ><i class="fa fa-credit-card"></i> <span>My Ads</span></a>
    <a href="#" class="list-group-item"><i class="fa fa-question-circle"></i> <span>Support</span></a>
    <a href="#" class="list-group-item"><i class="fa fa-arrow-circle-o-left"></i> <span>Sandbox Account</span></a>
    <a href="#" class="list-group-item"><i class="fa fa-book"></i> <span>QuickStart Overview</span></a>
    <a href="#" class="list-group-item"><i class="fa fa-compass"></i> <span>Documentation</span></a>


  </div>

  <script>
    $(document).ready(function() {
  

  $('.list-group-item').click(function(e) {
    e.preventDefault();
    $('.list-group-item').removeClass('active');
    $(this).addClass('active');
  });
});
  </script>
  

now I need highlight current menu item in above sidebar.blade.php file how can do it? current jquery codes is working only highlight in same page but when I go using link other page current link it is not highlight (as an example if I go to myads link from home page in myads page myads menu is not highlight)

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.