设置为从每个项目导航到角度时的激活角度li >>

Question

我需要通过单击将活动类从ul的一项转移到另一项。请在下面找到我当前的代码。

.location a {
  font-size: 1.2em;
  display: inline-block;
  padding: 8px 12px;
  color: #666666;
  font-weight: bold; }

.location a:hover{
  background: #29abe2;
  color: #fff;
  border-radius: 5px; }

.location a.active{
  background: #29abe2;
  color: #fff;
  border-radius: 5px; }

.location a .active-link{
  background: #29abe2;
  color: #fff;
  border-radius: 5px; }

#world:target, #nna:target, #ne:target, #nml:target{
  background: #29abe2;
  color: #fff;
  border-radius: 5px;
}
#navigation ul li a:active
{
  background-color: #29abe2;
}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="col-md-3 col-sm-3 location-class location" id="location">
    <ul class="location-ul">
        <li class="active"><a  (click)="worldClick()" id="world">WORLD</a></li>
        <li><a (click)="nnaClick()" id="nna">NNA</a></li>
        <li><a (click)="neClick()" id="ne">NE</a></li>
        <li><a (click)="nmlClick()" id="nml">NML</a></li>
    </ul> 
 </div>

我可以仅使用CSS来执行此任务，还是需要JS。任何帮助将非常感激。谢谢！

我需要通过单击将活动类从ul的一项转移到另一项。请在下面找到我当前的代码。 .location a {font-size：1.2em;显示：inline-block;填充：8px ...

Answer 1

您可以在ts

Answer 2

只需创建一个参考变量即可识别单击了哪个导航项。只需定义一个功能就可以，无需定义多个功能。