Question

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

$('.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>

Answer 1

我已经为您创建了Fiddle。根据您的问题，它的工作完美。

 $('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>

Answer 2

未更改HTML代码。 Java脚本基本上检查单击的nav药丸是否处于活动状态，将其删除，否则将分配活动类并从其他状态中移除活动类。

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

将活动添加到可折叠的导航链接

2 个答案: