Question

我在导航栏中有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"
    });
});

div中的所有锚点都会消失，除了点击的内容

2 个答案: