1

The sidebar needs to change active class after click.This is my bootstrap code and i tried it with this javascript code but it doesn't works.

$(function(){
    $('.sidebar1 a').filter(function(){return this.href==location.href}).parent().addClass('active').siblings().removeClass('active')
    $('.sidebar1 a').click(function(){
        $(this).parent().addClass('active').siblings().removeClass('active') 
    })
})
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="sidebar">
    <div class="list-group">
         <ul class="siderbar1">
              <li><a href="HhwController" class="list-group-item active">Hoe het werkt</a></li>
              <li><a href="OveronsController" class="list-group-item">Over ons</a></li>
             <li><a href="VpController" class="list-group-item">Veiligheid en privacy</a></li>
             <li><a href="FAQController" class="list-group-item">FAQ</a></li>
              <li><a href="Contactform" class="list-group-item">Contact</a></li>
          </ul>
     </div>
 </div>
Philipp
  • 15,377
  • 4
  • 35
  • 52
  • yes it will not work because page is getting refreshed while you click on the link so let me know if are you getting the controller name on the page using some variable or not? – Prateik Darji Dec 13 '17 at 11:43
  • The link is a controller name in codeigniter and it refreshes to a new page –  Dec 13 '17 at 12:14
  • Possible duplicate of [MVC with Bootstrap Navbar - Set Selected Item to Active](https://stackoverflow.com/questions/22407367/mvc-with-bootstrap-navbar-set-selected-item-to-active) – Vipin Kumar Dec 13 '17 at 12:21
  • It seems that the HTML class is "siderbar1" rather than "sidebar1". – showdev Jul 01 '23 at 06:09

4 Answers4

0

please try like below.

<script type="text/javascript">
$(function(){
    // $('.sidebar1 a').filter(function(){return this.href==location.href}).parent().addClass('active').siblings().removeClass('active'); i have not tried this line
    $('.sidebar1 a').click(function(){
      $(".list-group-item").removeClass('active');
       $(this).addClass('active');          
    })
})
</script>
Ayyappa amara
  • 437
  • 3
  • 16
  • the active class didn't change when I click on a link when I tried you're code –  Dec 13 '17 at 12:18
0

The easiest way how to unset .active class form siblings and set it to current one is

$('.sidebar1 a').click(function(){
    $('.sidebar1 .active').removeClass('active');
    $(this).parent().addClass('active');
});
pavel
  • 26,538
  • 10
  • 45
  • 61
0

try this

$('.sidebar1 a').click(function(){
    $('.sidebar1 .active').removeClass('active');
    $(this).parent().addClass('active');
});
Anis
  • 1,190
  • 2
  • 13
  • 26
  • Thank you for this code snippet, which might provide some limited, immediate help. A proper explanation [would greatly improve](//meta.stackexchange.com/q/114762) its long-term value by showing *why* this is a good solution to the problem, and would make it more useful to future readers with other, similar questions. Please [edit] your answer to add some explanation, including the assumptions you've made. – Toby Speight Dec 13 '17 at 13:34
0

First you have to remove active class from all anchor tags. Then, you can add active class to the anchor tag which is clicked. Also, you have to use e.preventDefault(), to stop browser from redirecting.

    $('.siderbar1 a').on('click', function(e) {
        e.preventDefault();
        $('.siderbar1 a').removeClass('active');
        $(this).addClass('active');
    }) 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="sidebar">
    <div class="list-group">
         <ul class="siderbar1">
              <li><a href="HhwController" class="list-group-item active">Hoe het werkt</a></li>
              <li><a href="OveronsController" class="list-group-item">Over ons</a></li>
             <li><a href="VpController" class="list-group-item">Veiligheid en privacy</a></li>
             <li><a href="FAQController" class="list-group-item">FAQ</a></li>
              <li><a href="Contactform" class="list-group-item">Contact</a></li>
          </ul>
     </div>
 </div>
Vipin Kumar
  • 6,441
  • 1
  • 19
  • 25
  • Sir, i used your code but the links are not working anymore for some reason. it changes the active class but it stays on the same page. @vipin kumar –  Dec 13 '17 at 12:06
  • If you want link to work, then you can remove `e.preventDefault();`. But then, each time your page refresh it will reset your active state. Then you have to use MVC manage the active state. – Vipin Kumar Dec 13 '17 at 12:17
  • So do I need to change something in my MVC or in my javascript to make it work? –  Dec 13 '17 at 12:19
  • you need do something in MVC. Check this https://stackoverflow.com/questions/22407367/mvc-with-bootstrap-navbar-set-selected-item-to-active – Vipin Kumar Dec 13 '17 at 12:20