Question

我正在尝试从头开始创建一个画廊，以便我可以了解它是如何完成的。到目前为止，我已经设法让我的画廊以我想要的方式工作，除非当缩略图处于活动状态时，它必须有一个白色叠加层，这就是我遇到问题的地方。

我的JS

$(".galImg").click(function() {
    var image = $(this).attr("rel");
    $('#feature').html('<img src="' + image + '"/>');
});

我的HTML

<div class="thumbnails">
    <a class="galImg active" rel="http://s25.postimg.org/keaisiflb/mini_brown_fairy.jpg" href="javascript:void(0)">
        <img src="http://s25.postimg.org/keaisiflb/mini_brown_fairy.jpg">
    </a>
    <a class="galImg" rel="http://s25.postimg.org/xwhf4srqn/mini_blue_fairy.jpg" href="javascript:void(0)">
        <img src="http://s25.postimg.org/xwhf4srqn/mini_blue_fairy.jpg">
    </a>
    <a class="galImg" rel="http://s25.postimg.org/smcgdi7hr/mini_purple_fairy.jpg" href="javascript:void(0)">
        <img src="http://s25.postimg.org/smcgdi7hr/mini_purple_fairy.jpg">
    </a>
</div>

<div id="feature" class="main-image">
    <img src="http://s25.postimg.org/keaisiflb/mini_brown_fairy.jpg">
</div>

我的CSS

.active{
    background-color: #ffffff;
    opacity: 077;
}

这是一个jsfiddle：JSFIDDLE

Answer 1

使用removeClass和addClass：

$(".galImg").click(function () {
    var image = $(this).attr("rel");
    $('#feature').html('<img src="' + image + '"/>');
    $('.galImg').removeClass('active');
    $(this).addClass('active');

});

DEMO

Answer 2

试试这个：你必须使用从0到1的不透明度值，使得微弱的使用值接近于0.见下面的css

.active {
    background-color: #ffffff;
    opacity: 0.5;
}

使用以下jquery来应用和删除active类 jQuery：

$(".galImg").click(function () {
    $('.active').removeClass('active');
    $(this).addClass('active');
    var image = $(this).attr("rel");
    $('#feature').html('<img src="' + image + '"/>');
});

<强> DEMO

Answer 3

$(".galImg").click(function() {
// first you remove all active class if theres some so you grab the parent
var parent = $(this).parent,
    image = $(this).attr("rel");
parent.children('.galImg").removeClass('active');
$(this).addClass('active');
var 
$('#feature').html('<img src="' + image + '"/>');

}）;

Answer 4

对于JS：

$(".galImg").click(function () {
        var image = $(this).attr("rel");
        $('#feature').html('<img src="' + image + '"/>');
        $('.galImg').each(function(){
            $(this).removeClass('active');
        });
        $(this).addClass('active');
    });

对于css：

    .active {
    background-color: #ffffff;
    opacity: 0.5;
}

.thumbnails img{
    width: 20%;
}

让课程显示何时单击项目

4 个答案: