删除一个元素的类，并使用JavaScript将其分配给另一个

问题描述：

我需要删除选定的类的<a>，并将其指派给最后的<a>。两者都嵌套在个别<li>元素中。删除一个元素的类，并使用JavaScript将其分配给另一个

下面的代码示例：

<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：

谢谢你的快速反应这么多大家。你所有的答案都是现货，希望我可以将它们全部标记为答案:)

您希望在什么时间点重新分配？任何事件特别像点击/ ousedown？ –

当然是'a [href =“VALUEOFYOURHREF”]' –

这应该发生在页面加载事件期间。这个想法是在第一次加载时显示一个不同的活动标签。 – nouptime

答

要从元素中移除类，请使用removeClass。

要获得最后一个元素，请使用:last选择器或last()。要添加新的类元素使用addClass

$('.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');

答

试试这个。

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

<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>

答

$('.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()

说明：将指定的类（ES），以每个元素集合中匹配的元素。如果你想使用任意a
document.querySelector('.selected').classList.remove('selected'); 

document.querySelector('.tabs li:last a').classList.add('selected'); 
，并选择属性：

@Tushar更适合于选择器'$（'。clearfix'）。find（'li：last'）。find（'a'）'或者$（'。clearfix'）。find（'li a：last '）'我会在必要时更新答案 – guradio

我认为'$（'。clearfix'）。find（'li：last'）。find（'a'）'，原因是你会缩小搜索范围通过选择一个'li'作为'a' – Tushar

感谢您的澄清。 – guradio

答

试试这个：

$(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>

答

这是很容易也香草JS然后你应该使用这个选择器：

a[href="HREFVALUE"]

删除一个元素的类，并使用JavaScript将其分配给另一个

相关推荐