Question

我有一个脚本，可以在未选择元素时更改元素的不透明度。这部分脚本运行正常。但是，我还希望在单击某个元素时显示隐藏的div。我有这个计划，以便当第一个元素（在这种情况下是一个图片）被点击时，将出现第一个隐藏的div，当点击第二个图片时，出现第二个隐藏的div。我认为使用类或类似检查div上给定ID的不透明度然后是否＆lt;＆lt; s＆lt; 1显示div。问题是，我不知道如何在页面上只显示一个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>

Answer 1

您确定不只是想使用标签插件吗？这是他们设计要完成的一种行为，他们已经内置了所有这些效果。

http://jqueryui.com/demos/tabs/

http://flowplayer.org/tools/tabs/index.html

jquery工具标签插件只有0.9 kb！

Answer 2

而不是

$('.hidden').eq(hideIs).show(250);

使用它：

$('.hidden.shown').removeClass('shown').hide(250);
$('.hidden').eq(hideIs).addClass('shown').show(250);

那就行了

它做什么：它实际上'标记'以前显示div为shown，所以在它标记另一个之前，它隐藏了前一个。

Answer 3

尝试这个，

http://pinoytech.org/question/5571133/problem-with-showing-hidden-divs-using-eq-and-index

使用eq（）和index（）显示隐藏div的问题

3 个答案: