我有一個腳本,它將在未選中時更改元素的不透明度。這部分腳本工作正常。不過,我還希望在單擊某個元素時出現隱藏的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