在下一个元素上删除活动类

Question

我正在研究添加活动类的选择，我想要的是删除所选元素旁边的活动类。如果只剩下一个选择。例如我有5个选项，然后选择1,2,3,4，如果我选择了第五个选项，则第一个选项的活动类别将被删除，然后，如果我再次选择1，它将变为活动状态，那么选项2将变为非活动状态。

希望您能帮助我。谢谢。

$('ul li a').click(function() {
    $(this).addClass('active');

    var len = $('ul .active').length;
    var arr = [];
    $('ul li a').each(function(i) {
        if ($(this).hasClass('active')) {
            arr.push(i + 1);
            if (len > 4) {
                if (arr[arr.length - 1] == 5) {
                    $('ul li:nth-child(' + arr[0] + ') a').removeClass('active');
                }
            }
        }
    });
});

ul{
  padding: 0;
}
ul li{
  float: left;
  list-style-type: none;
}
ul li a{
  text-decoration: none;
  color: #333;
  padding: 10px  15px;
  background-color: #DDD;
  margin: 5px;
  border-radius: 100px;
}
ul li a.active{
  background-color: green;
  color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

Answer 1

您可以尝试类似的操作，检查下一个li是否存在并添加逻辑

$('ul li a:not("active")').click(function() {
    
    
    $(this).parent().next("li").find("a").removeClass("active");
           
    if ($(this).parent().next("li").length == 0)
    {
        $('ul li a').eq(0).removeClass("active");
    }
    
    $(this).addClass("active");
    
});

ul{
  padding: 0;
}
ul li{
  float: left;
  list-style-type: none;
}
ul li a{
  text-decoration: none;
  color: #333;
  padding: 10px  15px;
  background-color: #DDD;
  margin: 5px;
  border-radius: 100px;
}
ul li a.active{
  background-color: green;
  color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

Answer 2

在这里。

$('ul li a').click(function() {
    $(this).addClass('active');
    
    if($(this).parent().next('li').length){
        $(this).parent().next().children().removeClass('active'); 
    }else{
  $(this).parent().parent().children().first().children().removeClass('active');
    }
});

ul{
  padding: 0;
}
ul li{
  float: left;
  list-style-type: none;
}
ul li a{
  text-decoration: none;
  color: #333;
  padding: 10px  15px;
  background-color: #DDD;
  margin: 5px;
  border-radius: 100px;
}
ul li a.active{
  background-color: green;
  color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>