Question

我需要移除<a>的选定类，并将其指定为最后一个<a>。两者都嵌套在单个<li>元素中。

以下是代码示例：

<ul class="tabs clearfix">
   <li class="tab"><a href="#one" class="selected">Home</a></li>
   <li class="tab"><a href="#two">About</a></li>
   <li class="tab"><a href="#three">Profile</a></li>
   <li class="tab"><a href="#four">History</a></li>
   <li class="tab"><a href="#five">The Beginning of V-Cube</a></li>
</ul>

如何使用JavaScript / jQuery实现这一目标？请指教。

修改

假设我不想专门针对最后一个标签。可以将href用作选择器吗？

编辑＃2：

非常感谢大家的快速反应。所有的答案都是现场的，希望我能将它们全部标记为答案：）

Answer 1

要从元素中删除类，请使用documentation。

要获取最后一个元素，请使用removeClass选择器或:last。要将新类添加到元素，请使用last()

$('.selected').removeClass('selected');

$('.tabs li:last a').addClass('selected');
// OR
// $('.tabs li').last().children('a').addClass('selected');

.selected {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="tabs clearfix">
  <li class="tab"><a href="#one" class="selected">Home</a>
  </li>
  <li class="tab"><a href="#two">About</a>
  </li>
  <li class="tab"><a href="#three">Profile</a>
  </li>
  <li class="tab"><a href="#four">History</a>
  </li>
  <li class="tab"><a href="#five">The Beginning of V-Cube</a>
  </li>
</ul>

<强>更新

假设我不想专门针对最后一个标签。可以将href用作选择器吗？

$('.tabs a[href="#five"]').addClass('selected');

Answer 2

试试这个。

＆＃13;

$(".tabs li").first().find("a").removeClass("selected");
$(".tabs li").last().find("a").addClass("selected");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs clearfix">
   <li class="tab"><a href="#one" class="selected">Home</a></li>
   <li class="tab"><a href="#two">About</a></li>
   <li class="tab"><a href="#three">Profile</a></li>
   <li class="tab"><a href="#four">History</a></li>
   <li class="tab"><a href="#five">The Beginning of V-Cube</a></li>
</ul>

＆＃13;

Answer 3

$('.clearfix').find('.selected').removeClass('selected');
$('.clearfix').find('li:last').find('a').addClass('selected');
$("a[href$='five']").addClass('bold');

.selected {
  color: red
}
.bold {
  font-weight: bold
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="tabs clearfix">
  <li class="tab"><a href="#one" class="selected">Home</a>
  </li>
  <li class="tab"><a href="#two">About</a>
  </li>
  <li class="tab"><a href="#three">Profile</a>
  </li>
  <li class="tab"><a href="#four">History</a>
  </li>
  <li class="tab"><a href="#five">The Beginning of V-Cube</a>
  </li>
</ul>

只需使用.removeClass() and .addClass()

即可

.removeClass()

从匹配元素集中的每个元素中删除单个类，多个类或所有类。

.addClass()

描述：将指定的类添加到匹配元素集中的每个元素。

Answer 4

试试这个：

$(document).ready(function(){
   var classname = $(".tabs li:first-child a").attr("class");
   console.log(classname);
   $(".tabs li:last-child a").addClass(classname);
   $(".tabs li:first-child a").removeClass();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="tabs clearfix">
   <li class="tab"><a href="#one" class="selected">Home</a></li>
   <li class="tab"><a href="#two">About</a></li>
   <li class="tab"><a href="#three">Profile</a></li>
   <li class="tab"><a href="#four">History</a></li>
   <li class="tab"><a href="#five">The Beginning of V-Cube</a></li>
</ul>

Answer 5

在香草JS中也很容易：

document.querySelector('.selected').classList.remove('selected');

document.querySelector('.tabs li:last a').classList.add('selected');

如果您想使用任意a并选择属性href，那么您应该使用此选择器：

a[href="HREFVALUE"]

删除一个元素的类，并使用JavaScript

5 个答案: