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>

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

Answer 1

这是一个更简单的解决方案，不需要id或随机属性：

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');
});

基本上它是什么让它点击缩略图的位置，然后在同一位置显示gallery元素（添加一个.show类，例如{。}}。

这是 flavored FIDDLE 的方法。

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}

Answer 4

在html 中设置属性

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

</div>

IN JS

  $('a').click(function(){ 
        var target = $(this).attr('rel');
        $('div.big').hide();
        $("div#"+target).show();
     })

Answer 5

您不应该有多个ID，它们应该是唯一的。更新您的div使用自定义HTML5数据属性：

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

试试这个：

$('.thumbnails a').click(function(){ 
    var target = $(this).data('target-id');
    $('div').hide();
    $('div[target-id=' + target).show();
 })

Answer 6

$('div.big').on('click','a',function(){
 $('.thumbnails').find('div').hide();

 var id = $(this).data('id');
 var $e = $('#' + id);
 $e.show();
})

注意 - 因为您不能拥有2个具有相同ID的元素。我在这里假设您将div的id显示在属性data-id

中

Answer 7

请试试这个：

<div id="gallery">

<div class="main">

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

</div>

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

</div>

$('.big').click(function(){
   var cuu_id= $(this).attr('rel');
    $('a').hide();
    $("#"+cuu_id).show();
 });

.thumbnails a {display:none;}

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

7 个答案: