将活动添加到可折叠的导航链接 [英] add active to collapsible nav-link

问题描述

该代码最初是用data-toggle="tab"设计的，但我将其替换为折叠.它按我的意愿工作.我需要在nav-link类中包含active类，以进行css重新设计.我尝试了几个jQuery，但似乎都没有用.

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>

推荐答案

我创建了小提琴为你.根据您的问题，它的工作完美.

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>

这篇关于将活动添加到可折叠的导航链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！