jQuery移除和添加类

Question

我将使用JQuery来添加/移除类作为一个函数的一部分，该函数使用链接来切换网站上的主要内容div。

这是我的JavaScript代码:

$(document).ready(function () {
  var clickHandler = function (link) {
     $('.tab').hide();
     $('#options_' + link.data.id).show();
     $('.selected').removeClass('selected');
     $(this).addClass('selected');
   }

   $('.link1').bind('click', {id:'1'}, clickHandler);
   $('.link2').bind('click', {id:'2'}, clickHandler);
   $('.link3').bind('click', {id:'3'}, clickHandler);
});

这里是我正在切换的div的HTML（这部分可用）：

<div id="options_1" class="tab">
<h3>Your Feed</h3>
<?= $userFeed ?></div>

<div id="options_2" class="tab">
<h3>All Recent Activity</h3>
<?= $feed ?>

</div>
<div id="options_3" class="tab">
<h3>Trends</h3>
Coming Soon!
</div>

以下是页面侧栏中控制div切换的链接的HTML代码。选项1上的类"selected"应该被删除，并且添加到用户选择的其他链接，但这并没有发生。类根本没有被改变。

<ul id="feedOptions">
<li><a href="#" id="1" class="link1" class="selected">Your Feed</a></li>
<li><a href="#" id="2" class="link2">All Activity</a></li>
<li><a href="#" id="3" class="link3">Trends</a></li>
</ul>

就像我上面说的，我无法改变“selected”类。有什么建议吗？

- tchaymore

Answer 1

您在一个元素上有多个class属性，应该这样写：

<a href="#" id="1" class="link1" class="selected">Your Feed</a>

你需要这样写（一个属性，用空格分隔不同的类）：

<a href="#" id="1" class="link1 selected">Your Feed</a>

- Nick Craver

---

当然啊！非常感谢，虽然我感觉有点傻。你无法相信我盯着那个东西多久，却忘了我添加了一个额外的“class”。现在运作得很好。 - tchaymore

Answer 2

$('.link1,.link2,.link3').bind('click', function() { $(this).toggleClass('selected'); });

- zerkms

---

这不会在其他元素上切换类（删除先前选择的） :) - Nick Craver

@Nick：没错。那不是他问题的完整答案，但这是一个提示，让他能够缩短代码的长度;-) - zerkms