javascript - 单击时编辑div类名称

所以基本上我有一堆导航按钮，我想在用户点击按钮时更改它们的名称。
原始的div类名类似于“home”，当用户单击它时，我希望它是“home_active”，这样CSS属性将更改背景图像。

$('.click').click(function() {
  var clicked_url = $(this).attr('class');
  var updated_url = clicked_url + "_active";
  $(this).attr('class') = updated_url;
});

.item_active {
  background-color: teal;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="item">item 1</a>
<a href="#" class="item">item 2</a>
<a href="#" class="item">item 3</a>

最佳答案

您应该使用.addClass()方法向元素添加一个类：

$('.click').click(function() {
    var clicked_url = $(this).attr('class');
    var updated_url = clicked_url + "_active";
    $(this).removeClass(clicked_url); // remove the old class
    $(this).addClass(updated_url); // add the new class
});

但是，作为一个好的实践，最好在现有类中添加一个修改类，例如“Active”类，保存原始类名。
然后使用以下CSS：

.click.active {
    background: red;
}

JS代码如下所示：

$('.click').click(function() {
    $('.click.active').removeClass('active'); // remove active class from all other nav items
    $(this).addClass('active'); // add active to the nav item the users just clicked on
});

关于javascript - 单击时编辑div类名称，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56909547/