时间戳

首页 > 解决方案 > 单击时编辑 div 类名称

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>

标签： javascriptjqueryhtmlcss

解决方案

您应使用.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
});

推荐阅读