我有一个脚本,它将在未选中时更改元素的不透明度。这部分脚本工作正常。不过,我还希望在单击某个元素时出现隐藏的div。我有这样的计划,当点击第一个元素(这是一个图片)时,第一个隐藏的div将出现,当第二个图片被点击时,第二个隐藏的div出现。我认为使用类或类似的东西来检查div上的给定ID的不透明度,然后是显示div的< 1可能会更有用。问题在于,我不知道如何只保留一个div在页面上可见。我尝试了一些东西,现在这个脚本不起作用,但它有点接近。使用eq()和index()显示隐藏div的问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<style>
.opac {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
border:thick;
}
.hidden{
display:none;
}
</style>
<script>
$(document).ready(function(){
$('a.images').(function(){
// Make all images (except this) transparent
$('a.images').not(this).stop().animate({opacity: 0.15}, 300);
// Make this opaque
$('a.images').each(function(e){
$(this).bind('click', function(e){
var hideIs = $(this).index();
$('.hidden').eq(hideIs).show(250);
});
$(this).stop().animate({opacity: 1.0}, 300);
});
});
});
</script>
</head>
<body>
<div id="images">
<a class="images" href="#"><img src="../appalachia.jpg" height="133" /></a>
<div class="hidden" >text here</div>
<a class="images" href="#"><img src="../appalachia.jpg" height="133" /></a>
<div class="hidden">second text here</div>
<a class="images" href="#"><img src="../appalachia.jpg" height="133" /></a>
<div class="hidden">third text here
<a class="images" href="#"><img src="../appalachia.jpg" height="133" /></a>
<div class="hidden" >fourth text here</div>
</div>
</body>
</html>
你的意思'$( 'a.images')。每个(函数(){',而不是'$( 'a.images')。(函数( ){'? – climbage 2011-04-06 18:27:38