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

【问题标题】：add active to collapsible nav-link将活动添加到可折叠导航链接
【发布时间】：2018-08-21 02:30:10
【问题描述】：

代码最初是用data-toggle="tab" 设计的，但我将其替换为折叠。它按我的意愿工作。我需要将活动包含在nav-link 类中，以便重新设计css。我尝试了几个 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>

【问题讨论】：

标签： javascript html bootstrap-4

【解决方案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>

【讨论】：

它可以将“li”替换为“a”。我现在需要你的帮助来检查 $(this) 是否已经激活，我想删除它。有什么想法吗？

【解决方案2】：

HTML 代码没有变化。 Java 脚本主要检查单击的导航丸是否具有活动状态，它将删除它，否则它将分配活动类并删除其他活动类。

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

【讨论】：

我已经在我的代码中做到了。您不需要为此使用if else...。