刪除一個元素的類，並使用JavaScript將其分配給另一個

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

要從元素中移除類，請使用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'); 

Answer 2

試試這個。

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

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

說明：將指定的類（ES），以每個元素集合中匹配的元素。如果你想使用任意a

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

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

，並選擇屬性：

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然後你應該使用這個選擇器：

a[href="HREFVALUE"]