Question

抱歉如果这是一个非常简单的问题，但出于某种原因，我无法解决这个问题。

我要做的是将activeButton类添加到您单击的每个列表项和将activeButton类删除到具有 activeButton的列表项单击列表项之前的类。

以下是我的问题的代码段

$(document).ready(function () {
				$('.buttons').click(function () {
					$('.activeButton').removeClass('.activeButton');
					$(this).addClass('.activeButton');
			});
		});

.buttons {
  /*This is for decorative and visual purposes. 
    So you can ignore the CSS for now.*/
  display: inline-block;
  margin: 10px;
  }

.activeButton {
  border-bottom: 1px solid black;/*I use border-bottom to provide underlines for my text. This allows the underline to be transitioned or animated*/
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
				<li class="buttons activeButton">Link1</li>
				<li class="buttons">Link2</li>
				<li class="buttons">Link3</li>
				<li class="buttons">Link4</li>
			</ul>

为了澄清，我将解释我的目标和当前的问题。

目标：点击列表项后，类.activeButton将添加到点击的列表项中，JS将从列表中删除.activeButton 最初的项目具有activeButton类。

问题：我编写的尝试解决方案不起作用。

Answer 1

您传递给addClass()和removeClass()的字符串中不需要类选择器。

更新如下：

$(function () {
    $('.postalProvider').click(function () {
        $('.activeButton').removeClass('activeButton');
        $(this).addClass('activeButton');
    });
});

Answer 2

更新：

$(document).ready(function () {
    var $buttons = $('.buttons');

    $buttons.click(function () {
        $buttons.removeClass('.activeButton');
        $(this).addClass('.activeButton');
    });
});

我认为这就是你所追求的目标。

Answer 3

你喜欢这个吗？

＆＃13;

$(document).ready(function () {
  $('.buttons').click(function () {
    $('.buttons').removeClass('activeButton'); // <-- remove from all .buttons class
    $(this).addClass('activeButton'); // <-- add to clicked link only
  });
});

＆＃13;

.buttons {
  /*This is for decorative and visual purposes. 
    So you can ignore the CSS for now.*/
  display: inline-block;
  margin: 10px;
  }

.activeButton {
  border-bottom: 1px solid black;/*I use border-bottom to provide underlines for my text. This allows the underline to be transitioned or animated*/
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
				<li class="buttons activeButton">Link1</li>
				<li class="buttons">Link2</li>
				<li class="buttons">Link3</li>
				<li class="buttons">Link4</li>
			</ul>

＆＃13;

addClass和removeClass无法正常工作

3 个答案: