add active to collapsible nav-link

问题

The code was initially designed with data-toggle="tab" but I replaced it to collapse. It worked as I wanted. I need to to include active to nav-link class for css redesign purposes. I tried couple of jQuery but none seem to work.

$('.nav .nav-item .nav-link').click(function(){
    $('.nav .nav-item .nav-link').removeClass('active');
    $(this).addClass('active');
})

<div id="accordion">
  <ul class="nav nav-pills nav-justified" style="width: 100%;margin: auto;padding: 0px;" role="tablist">
   <li class="nav-item"> <a class="nav-link collapsed" href="#dashboard-1"	role="tab" data-toggle="collapse">	<i class="material-icons">dashboard</i> Dashboard </a></li>	
   <li class="nav-item"> <a class="nav-link collapsed" href="#schedule-1" 	role="tab" data-toggle="collapse">	<i class="material-icons">schedule</i>  Schedule  </a></li>
   <li class="nav-item"> <a class="nav-link collapsed" href="#tasks-1" 	        role="tab" data-toggle="collapse">	<i class="material-icons">list</i>      List      </a></li>
  </ul>
    <div class="tab-content tab-space">	
	<div class="collapse" data-parent="#accordion" id="dashboard-1">Collaboratively</div>
	<div class="collapse" data-parent="#accordion" id="schedule-1">	Efficiently    </div>
	<div class="collapse" data-parent="#accordion" id="tasks-1">	Completely     </div>
    </div>
</div>

回答1:

I have create Fiddle for you. Its work perfect as per your question.

 $('li').click(function() {
        $('li.active').removeClass('active');
        $(this).addClass('active');
    })

.active{
background-color:yellow;
font-size:25px;
font-weight:bold;
}

<div id="accordion">
      <ul class="nav nav-pills nav-justified" style="width: 100%;margin: auto;padding: 0px;" role="tablist">
       <li class="nav-item"> <a class="nav-link collapsed" href="#dashboard-1"	role="tab" data-toggle="collapse">	<i class="material-icons">dashboard</i> Dashboard </a></li>	
       <li class="nav-item"> <a class="nav-link collapsed" href="#schedule-1" 	role="tab" data-toggle="collapse">	<i class="material-icons">schedule</i>  Schedule  </a></li>
       <li class="nav-item"> <a class="nav-link collapsed" href="#tasks-1" 	        role="tab" data-toggle="collapse">	<i class="material-icons">list</i>      List      </a></li>
      </ul>
        <div class="tab-content tab-space">	
    	<div class="collapse" data-parent="#accordion" id="dashboard-1">Collaboratively</div>
    	<div class="collapse" data-parent="#accordion" id="schedule-1">	Efficiently    </div>
    	<div class="collapse" data-parent="#accordion" id="tasks-1">	Completely     </div>
        </div>
    </div>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

回答2:

no change to HTML code. the java script basically check if clicked nav pill has an active state, it will remove it otherwise it will assign active class and remove active class in others.

 $('a').click(function() {
  if ( $(this).hasClass('active') ) {
    $(this).removeClass('active');
  } else {
	$('a.active').removeClass('active');
	$(this).addClass('active');
  }
});

来源：https://stackoverflow.com/questions/51923964/add-active-to-collapsible-nav-link

标签

javascript

html

bootstrap-4