Question

使用jquery我有一个单击标签机制，它只是返回false 的锚标签，但调用javascript函数在页面上运行某些事件。问题是我使用jquery将不透明度样式应用于活动锚点。而另一个兄弟锚点获得较小的不透明度视图。我的代码看起来像这样

$("#menutab li a").click(function(){
 $(this).animate({opacity:'1'},1000);
  $(this).siblings().animate({opacity:'.25'},1000);
}

我认为这段代码只对被点击的元素起作用，并将css样式应用于该元素，将其他样式应用于其他锚标记，但点击的除外。它有点做，但它也做的是将早期点击的元素留给opacity = 1，所以如果我点击一个元素它将它的不透明度设置为1然后如果我点击另一个它将它的不透明度设置为1而留下之前点击一对一，而不是像其他人一样将它设置为.25。

修改我将上面的代码更改为：

$("#menutab ul li").click(function(){
 $(this).children().animate({opacity:'1'},1000);
  $(this).siblings().children().animate({opacity:'.25'},1000);
});

现在我得到了预期的效果，但是当单击列表中的第一个锚点时不遵循事件规则，当单击第一个锚点时，就好像没有触发点击事件，因为没有不透明度风格变化。我不明白。

Answer 1

在.stop()之前添加.animate()次来电。

Answer 2

即使单击列表中的第一个锚点，这对我来说也很完美：

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $("#menutab ul li").click(function(){
     $(this).children().animate({opacity:'1'},1000);
      $(this).siblings().children().animate({opacity:'.25'},1000);
    });
});

</script>   
<div id="menutab">
    <ul>
        <li><a href="javascript: return false;" >Test1</a></li>
        <li><a href="javascript: return false;" >Test2</a></li>
        <li><a href="javascript: return false;" >Test3</a></li>
        <li><a href="javascript: return false;" >Test4</a></li>
        <li><a href="javascript: return false;" >Test5</a></li>
    </ul>
</div>

应用CSS样式来锚定问题

2 个答案: