使用jQuery在Ul li中添加类并删除类

Question

<ul class="tab_sublinks">
    <li><a href="#" class="active">Product Master</a></li>
    <li style="margin: 0;">|</li>
    <li><a href="#">Charges Computation Master</a></li>
</ul>

点击active后，我需要在锚标记中添加<a>类，并从之前的active代码中移除<a>类

Answer 1

试试这个..

$(".tab_sublinks a").on("click", function(){
$(".tab_sublinks a").removeClass("active");
  $(this).addClass("active");
});

此会从active内的所有a标记中删除tab_sublinks个类，并将active类添加到当前element。

Answer 2

您应该使用通用选择器从所有active标记中删除<a>类，然后使用this将类添加到当前标记。

通用选择器

如果通用选择器是唯一的，即你没有更多tab_sublinks。

，这将有效

＆＃13;

＆＃13;

$('.tab_sublinks a').on('click', function(){
  $(".tab_sublinks a").removeClass('active');
  $(this).addClass('active');
})

＆＃13;

.active{
  background: #ddd;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul class="tab_sublinks">
    <li><a href="#" class="active">Product Master</a></li>
    <li style="margin: 0;">|</li>
    <li><a href="#">Charges Computation Master</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

使用此搜索

这是一种更健壮的方式，因为您使用this来搜索元素，并且会在当前范围内生效。如果您有多个tab_sublinks，这是更优选的方式

＆＃13;

＆＃13;

$('.tab_sublinks a').on('click', function(){
  $(this)
  // Search nearest element with `tab_sublinks`
  .closest('.tab_sublinks')
  // Search for a.active in this element
  .find('li a.active').removeClass('active')
  $(this).addClass('active');
})

＆＃13;

.active{
  background: #ddd;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul class="tab_sublinks">
    <li><a href="#" class="active">Product Master</a></li>
    <li style="margin: 0;">|</li>
    <li><a href="#">Charges Computation Master</a></li>
</ul>

<ul class="tab_sublinks">
    <li><a href="#" class="active">Product Master</a></li>
    <li style="margin: 0;">|</li>
    <li><a href="#">Charges Computation Master</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用jQuery click事件添加活动类。

$(document).on('ready', function() {

  $('.js-nav-item').click(function() {
    $('.c-active-link').removeClass('c-active-link'); // Remove Class First
    $(this).addClass('c-active-link'); // Add Class to Active Item
  })

});

.c-active-link {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tab_sublinks">
  <li><a href="#" class="c-active-link js-nav-item">Product Master</a>
  </li>
  <li style="margin: 0;">|</li>
  <li><a href="#" class="js-nav-item">Charges Computation Master</a>
  </li>
</ul>