Question

我正在使用bootstrap来创建包含自定义内容的List-Group。问题是列表项必须具有一个名为“active”的属性，因此元素的背景为蓝色。我想要的是，当我点击另一个列表项时，它必须获得“活动”类，因此它可以具有蓝色背景。

这里有一些代码：

<div class="col-md-6 col-md-offset-3 list-group lista"><!--Center of the container-->
            <a href="" class="list-group-item active" id="act">
                <h4 class="list-group-item-heading">Actualizacion</h4>
                <p class="list-group-item-text">Realizamos actualizacion de software ya sea que tu telefono este lento, presente errores extranos
                    en su comportamiento o simplemente quieras subir la version actual.
                </p>
            </a>

            <a href="" class="list-group-item" id="unl">
                <h4 class="list-group-item-heading">Liberacion</h4>
                <p class="list-group-item-text">
                    Quieres cambiar de operador y no puedes porque tu telefono no tiene las bandas abiertas?
                    Vas a salir de viaje y necesitar una SIM CARD en el exterior?
                    Trae tu telefono podemos realizarle un desbloqueo de bandas para que trabaje con cualquier operador
                    a nivel mundial (1).
                </p>
            </a>
        </div>

这是我的剧本：

$(".lista").on("click", "a", function(){

$(this).siblings().removeClass("active");

$(this).addClass("active");});

当我尝试这个时，我点击的项目获得蓝色背景，但立即失去它，前一个仍然保持蓝色背景。如何解决这个问题。

Answer 1

您的代码运行正常，并获得了蓝色背景。但是，你有锚标签，这是重定向。把它，e.preventDefault();。

 $(".lista").on("click", "a", function(e){
   e.preventDefault();
   $(this).siblings().removeClass("active");
   $(this).addClass("active");
 });

Answer 2

代码工作正常，但您可以尝试下面的代码。

从所有元素中删除活动类，并将活动类添加到单击的元素

$(".lista").on("click", "a", function(e){
    e.preventDefault();
     $('a.list-group-item').removeClass("active");
     $(this).addClass("active");
});

点击不正常

2 个答案: