日期:2014-05-16  浏览次数:20383 次

求实现方法··
有若干个<a></a>标签都有各自的样式如
<a class='aaa'>aaaa</a>
<a class='bbb'>bbbb</a>
<a class='ccc'>cccc</a>
<a class='ddd'>dddd</a>
....
点击aaaa 样式就更改class='zzz',再点击bbbb, aaaa的样式恢复为原来的class='aaa',而bbbb样式变为class='zzz'。 同理 ,点击任何一个a标签样式都变为class='zzz', 其他标签恢复为各自原来的样式。
请教大家用 js 如何实现。。。 谢谢! 

------解决方案--------------------
方法1:
var lastItem = {
  object: '',
  class: ''
};

$('a').click(function() {
  if (lastItem.object) {
    lastItem.object.attr('class', lastItem.class);
  }
  lastItem.object = $(this);
  lastItem.class = $(this).attr('class');
  //设置当前点击的class
  $(this).attr('class', 'zzz');
  
});

方法2:
先改HTML结构,因为需要记住之前的选择:
<a class='aaa' originClass="aaa">aaaa</a>
<a class='bbb' originClass="bbb">bbbb</a>
<a class='ccc' originClass="bbb">cccc</a>
<a class='ddd' originClass="ccc">dddd</a>
JS代码:
$('a').click(function() {
  //把其它的class还原
  $('a').each(function() {
    $(this).attr('class', $(this).attr('originClass'));
  });
  //设置当前点击的class
  $(this).attr('class', 'zzz');
});

------解决方案--------------------
唔,没错。方法一是可正常运行。