单击时使列表处于活动状态

Question

您好，我对 javascript 一无所知，请帮助我在单击每个项目时将其激活。

$('.card > a').click(function(e){
  // find/remove all active classes from each a
  $('.mainNav > a').removeClass('active');

  // add active selected a
  $(this).addClass('active');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4">
      <div class="card text-dark  mb-3"style="auto"  >
        <div class="card-header" style="background: #ffc221"  >  MENU </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item active"><a href="">  Math mcq</a></li>
          <li class="list-group-item"><a href="">  Urdu mcq</a></li>
          <li class="list-group-item"><a href="">  Stat mcq</a></li>
         
          
        </ul>
      </div>
    </div>

Answer 1

您似乎在使用 jQuery？只是检查一下，因为这也是我的答案。

$('.card > a').click(function(e){
  // find/remove all active classes from each a
  $('.mainNav > a').removeClass('active');

  // add active selected a
  $(this).addClass('active');
});

这看起来不错，但我在你的问题中没有看到 mainNav。

> 是直接后代选择器，所以它试图找到直接在 mainNav 下的所有 a 元素，我认为将选择器更改为某些东西会更好喜欢：

$('ul.list-group li > a').removeClass('active');

完整示例：

$('ul.list-group li > a').click(function(e){

  e.preventDefault(); // added this line to prevent default click behaviour    

  // find/remove all active classes from each a
  $('ul.list-group li > a').removeClass('active');

  // add active selected a
  $(this).addClass('active');
});

这条线可能也会让你失望，如果没有看到 CSS 很难说，但我猜你可能需要添加 active li，不是 a 标签本身？

如果是这样，更改：

// add active selected a
$(this).addClass('active');

至

// add active selected li
$(this).parent().addClass('active');

如果 li 元素应该有活动的 class，那么这一行也需要更改：

// find/remove all active classes from each
$('ul.list-group li').removeClass('active');

Answer 2

问题是您的 a 标签不是具有 card class 的元素的 children，因此 .card > a 的选择器是不正确的，因为它只影响作为 active 的 class 元素的 children（而不是后代）的锚点。 > 表示“child”。您可以使用 space，这意味着后代。然而，最好将 li 元素而不是 a 元素作为目标，以使它们处于活动状态，因为这样您就可以使用开箱即用的 siblings 来删除 active class。如果您不需要从其他元素中删除 active class，那么您可以简单地删除调用 siblings().

的行

$('.card li').click(function(e){
  // find/remove all active classes from each a
  $('.mainNav > a').removeClass('active');

  // add active selected a
  $(this).addClass('active').siblings().removeClass("active");
  e.preventDefault();
});

.active {
    background-color: lightgreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4">
      <div class="card text-dark  mb-3"style="auto"  >
        <div class="card-header" style="background: #ffc221"  >  MENU </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item active"><a href="">  Math mcq</a></li>
          <li class="list-group-item"><a href="">  Urdu mcq</a></li>
          <li class="list-group-item"><a href="">  Stat mcq</a></li>
         
          
        </ul>
      </div>
    </div>

单击时使列表处于活动状态

make list active on click

javascript

jquery

list

twitter-bootstrap