javascript - div 中的所有锚点都会淡出，除了被点击的

Question

http://liveweave.com/Y5JRdE

我在导航栏中有 3 个按钮，选择、div 和文本。当我单击选择按钮时，我希望所有其他 div 以 60% 的不透明度进行动画处理，除了选择。再次单击它时，我不希望指定任何更改，除非我单击锚点并切换它。

它有点工作，但它的编码很差，我尝试使用单选按钮执行此操作，但无法通过单击按钮触发它，并让它在导航栏中正确显示，所以我试图将类似的概念应用于导航栏检查元素时使用锚点而不是反抗。

jQuery/JavaScript：

$('#tools a').click(function() {
    $('#tools a').animate({
        "opacity": "0.6"
    });

    $(this).animate({
        "opacity": "1"
    });
});

HTML：

<div class='header' data-role='header'>
    <div id='tools' align='center'>
        <a id='select' data-role='button' data-inline='true' data-mini='true'>Select</a>
        <a id='gen1' data-role='button' data-inline='true' data-mini='true'>Button</a>
        <a id='gen2' data-role='button' data-inline='true' data-mini='true'>Anchor</a>
    </div>

    <h1 style='visibility:hidden; width:0; height:0; margin:0;'>NULL</h1>
</div>

Answer 1

只需:not(this)在动画之前添加。

$('#tools a').click(function() {
    $('#tools a'):not(this).animate({
        "opacity": "0.6"
    });

    $(this).animate({
        "opacity": "1"
    });
});

Answer 2

使用辅助类

$('#tools a').click(function() {
  if($(this).hasClass('active')){
     $(this).removeClass('active');
  }else {
  $(this).addClass('active');
    $('#tools a').animate({
        "opacity": "0.6"
    });
  }
    $(this).animate({
        "opacity": "1"
    });
});