JQuery删除和添加类

时间:2010-08-03 20:55:39

标签: php jquery forms

我正在尝试使用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中删除“已选择”类,并将其添加到用户选择的任何其他链接中,但这不会发生。该课程根本没有改变。

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

就像我上面说的那样,我根本无法改变“选定”课程。有什么建议吗?

2 个答案:

答案 0 :(得分:4)

您在一个元素上有多个class属性,而不是:

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

你应该有这个(单个属性,带空格的单独类):

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

答案 1 :(得分:1)

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