将CSS样式应用于锚问题

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

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

我认为这个代码将只有点击的元素上采取行动并应用CSS样式到该元素和其他样式除了点击一个接一个锚标记。它有这样做，但它也是做的是离开较早的点击元素为opacity = 1，所以如果我点击一个元素，它将其设置为1不透明度，然后如果我点击另一个元素，它将其不透明度设置为1，而离开之前点击1到1，而不是像其他人一样将其设置为.25。

编辑： 我改变了上面的代码：

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

，现在我得到想要的效果一样，除了在该列表中的第一锚被点击不遵守规则的情况下，当第一个点击它的时候，点击事件没有被触发，因为没有不透明样式改变。我不明白。

来源

2010-04-23 Jake

这工作适合我，甚至当单击列表中的第一锚：

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

来源

2010-04-24 05:26:36

问题谎言，我手动对li html代码进行更改..因为你有我的同一个答案，我会给你接受 – Jake 2010-04-26 15:35:31

在.animate()之前加.stop()。

来源

2010-04-23 18:34:20 SLaks

还是做同样的事情 – Jake 2010-04-23 18:39:56

请给我们演示。 – SLaks 2010-04-23 19:08:58

将CSS样式应用于锚问题

回答

相关问题