javascript - addClass和removeClass无法正常工作

抱歉，这是一个非常简单的问题，但是由于某些原因，我无法正常工作。

我想要做的是将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。

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

最佳答案

你是这样说的吗？

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

.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>

关于javascript - addClass和removeClass无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35540884/