Question

我正在开发一个ASP.NET MVC 5项目。在那里，显示图像。但是，点击小图片并不能分别显示大图像。

这是jQuery代码：

$('.preview-thumbnail li a').click(function () {       
        var target = $(this).data('target');
        if(target){
            $(target).toggleClass('active');
        }
    });

<div class="col-sm-5">
        <div class="preview">
            <div class="preview-pic tab-content">
                @{ int i = 0;
                    foreach (var item in Model.Images)
                    {
                        i++;
                        <div class="tab-pane" id="pic-@i"><img style="width:400px;height:252px" src="@item.ImagePath"></div>
 
                    }
                }
            </div>
            <ul class="preview-thumbnail nav nav-tabs">
                @{ int j = 0;
                    foreach (var item in Model.Images)
                    {
                        j++;
                        <li class="active"><a data-target="#pic-@j" data-toggle="tab"><img style="width:200px;height:50px" src="@item.ImagePath"></a></li>
                    }
                }
            </ul>
        </div>
    </div>

如何在缩略图上单独显示图像弹出窗口？请帮帮我......

Answer 1

如果您想切换课程，可以使用JQuery＆＃39; .toggleClass('active')，如下所示：

 $('.preview-thumbnail li a').click(function () {       
        var target = $(this).data('target');
        if(target){
            $(this).toggleClass('active');
        }
 });

如果元素已经有该类，它将删除活动类。

当用户点击缩略图时，你想要更大吗？有一些JQuery插件可以帮助实现这个效果，比如Magnific Popup ，因为你已经使用了JQuery。

Answer 2

$('.preview-thumbnail li a').click(function () {       
        var target = $(this).data('target');
        if(target){
            $(target).addClass('active');
        }
    });

对于删除类，您可以使用

$(target).removeClass('active');

Answer 3

你试试：

    $('.preview-thumbnail li a').click(function () {       
        var target = $(this).data('target');
        if(target){
            $(this).addClass("active");
        }
   });

如果没有显示大。您打开检查浏览器检查类活动。

如何进行活动类添加/删除单击缩略图？

3 个答案: