显示一个div，在单击时隐藏所有其他

Question

我有一个简单的图像/视频画廊，我想用jQuery动画。我想要做的就是，当有人单击一个链接时，ID相同的.big div设置为display:block; opacity:1，所有其他div都设置为display:none; opacity:0。

这是我的画廊的标记；

<div id="gallery">

    <div class="main">

        <div id="big-1" class="big"><!-- image / video here --></div>
        <div id="big-2" class="big"><!-- image / video here --></div>
        <div id="big-3" class="big"><!-- image / video here --></div>

    </div>

    <div class="thumbnails">

        <a id="1" href="#"><img src="images/thumb1.jpg" alt="#"/></a>
        <a id="2" href="#"><img src="images/thumb1.jpg" alt="#"/></a>
        <a id="3" href="#"><img src="images/thumb1.jpg" alt="#"/></a>

    </div>

</div>

默认情况下，除了第一个div之外，所有.big div都被设置为display:none; opacity:0。

Answer 1

在不需要is或随机属性的情况下，这里有一个简单的解决方案：

HTML：

<div id="gallery">
<div class="main">
    <div class="big show"><!-- image / video here --></div>
    <div class="big"><!-- image / video here --></div>
    <div class="big"><!-- image / video here --></div>
</div>

<div class="thumbnails">
    <a href="#"><img src="images/thumb1.jpg" alt="#"/></a>
    <a href="#"><img src="images/thumb1.jpg" alt="#"/></a>
    <a href="#"><img src="images/thumb1.jpg" alt="#"/></a>
</div>

​

jQuery：

$('.thumbnails a').on('click',function(){
   var eq = $(this).index();

   $('.main .big').removeClass('show');
   $('.main .big').eq(eq).addClass('show');
});

基本上，它的作用是点击缩略图的位置，然后在相同的位置显示图片库元素(例如，添加一个类.show，其中包含display:block )。

这里是一个调味小提琴稀释的方法。

Answer 2

首先，您有几个ID相同的元素，这是错误的。页面上的每个ID都应该是唯一的。

然后你可以这样做：

<div class="main">

    <div id="vid1" class="big"><!-- image / video here --></div>
    <div id="vid2" class="big"><!-- image / video here --></div>
    <div id="vid3" class="big"><!-- image / video here --></div>

</div>

<div class="thumbnails">

    <a id="1" class="vidlink" href="#"><img src="images/thumb1.jpg" alt="#"/></a>
    <a id="2" class="vidlink" href="#"><img src="images/thumb1.jpg" alt="#"/></a>
    <a id="3" class="vidlink" href="#"><img src="images/thumb1.jpg" alt="#"/></a>

</div>
<script>
    $('a.vidlink').click(function(){
        $('div.main div').css('opacity',0).css('display','none');
        $('div.main div#vid'+this.attr('id')).css('opacity',1).css('display','block');
    });
</script>

但我强烈建议只使用jquery的.hide()和.show()函数。

Answer 3

ID不能是唯一的数字。

ID公约：

必须至少包含一个字符。 不得包含任何空格字符 不要用数字开始ID名 ID必须是唯一的。

尝试：

HTML：

<div id="gallery">

    <div class="main">

        <div id="b1" class="big active"><!-- image / video here --></div>
        <div id="b2" class="big"><!-- image / video here --></div>
        <div id="b3" class="big"><!-- image / video here --></div>

    </div>

    <div class="thumbnails">

        <a id="t1" class="active" href="#"><img src="images/thumb1.jpg" alt="#"/></a>
        <a id="t2" href="#"><img src="images/thumb1.jpg" alt="#"/></a>
        <a id="t3" href="#"><img src="images/thumb1.jpg" alt="#"/></a>

    </div>

</div>

jQuery：

$(".big").click(function () {
        var th = $(this);
        var id = this.id;
        id = id.substr(1);
        if (!($(th).hasClass("active"))){
            $(".active ").removeClass("active");
            $(th).addClass("active");
            $(".thumbnails ").find("#t"+id).addClass("active");
        }
    });

CSS：

.main div,.thumbnails div{display:none; opacity:0}
.active{display:block;opacity:1}