3

我有一个简单的图像/视频库，我想用 jQuery 制作动画。我想要做的就是，当有人单击链接时，.big具有相同 ID 的 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>

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

4

7 回答 7

2

这是一个更简单的解决方案，不需要 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');
});

基本上它的作用是获取单击缩略图的位置，然后在相同位置显示画廊元素（例如添加一个类.show）display:block。

这是一个说明该方法的风味 FIDDLE。

于 2013-11-07T12:52:14.953 回答
1

首先，您有几个具有相同 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()函数。

于 2013-11-07T12:25:09.103 回答
1

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}
于 2013-11-07T12:28:22.653 回答
0

在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>

在 JS

  $('a').click(function(){ 
        var target = $(this).attr('rel');
        $('div.big').hide();
        $("div#"+target).show();
     })
于 2013-11-07T12:23:06.180 回答
0

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

<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();
 })
于 2013-11-07T12:24:05.957 回答
0 
$('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

于 2013-11-07T12:24:48.350 回答
0

请试试这个：

<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;}
于 2013-11-07T12:37:57.527 回答