单击时编辑div类名称

Question

因此，基本上，我有一堆导航按钮，我想在用户单击按钮时更改其名称。

原始的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> 

Answer 1

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

Answer 2

使用Jquery函数：

$(this).hasClass("className");
$(this).addClass("className");
$(this).removeClass("className");

Answer 3

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

Answer 4

差不多了-但是请记住使用attr重置类值。 你最有可能想要删除 _active从其他.click元素，所以这是唯一的一个。

$(".click").click(function() {
  $(".click").each(function() {
    $(this).attr("class", $(this).attr("class").replace(/_active/, ""));
  });
  $(this).attr("class", $(this).attr("class") + "_active");
});

Answer 5

不知道在哪里的类.click是但.item和.click(...)方法是确定的-我更喜欢使用.on('click', ...)见的区别（。点击）和.on（） ）。

$('.item').on('click', function() {...

由于目标是通过更改其类来简单地更改单击链接的样式，因此最好分配一个公共类（已完成： .item ）和一个设置状态的类（一个单独的类： .active ）。

$(this).toggleClass('active');

如果您希望将其应用于其他标签，只需修改外部选择器

$('.item, :button').on('click', function() {...

上面的选择器将侦听带有.item类以及任何<button>和<input type='button'>标记的任何内容的点击。

---

尚不清楚所需的行为是什么，因此有两个演示：

演示1：单击任何链接以添加/删除.active类

要么

演示2：单击任何链接以独占方式添加/删除.active类

演示1

单击任何链接以添加/删除.active类

 $('.item').on('click', function() { $(this).toggleClass('active'); }); 

 .active { background-color: teal; color: white } 

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

演示2

单击任何链接以独占方式添加/删除.active类

 $('.item').on('click', function() { $(this).toggleClass('active'); $('.item').not(this).removeClass('active'); }); 

 .active { background-color: teal; color: white } 

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

Answer 6

夫妻的事。 首先，您要选择类名称为“ item”而不是“ click”的元素。 其次，您使用了attr()函数错误。 您想将var设置为第二个参数，而不是attr('class') = var ，例如attr('class', var) 。

编辑：最后，您应该在单击事件中检查链接是否已被先前单击（即，它是否已经具有“ _active”后缀）：

 $('.item').click(function() { var clicked_url = $(this).attr('class'); var updated_url; if(clicked_url.includes("_active")){ updated_url = "item"; }else{ updated_url = "item_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>