如果图片处于活动状态，则更改图片，如果不活动，则更改回来

Question

我最近在学习 javascript，但现在我被一个简单的（我认为）问题困住了 2 天！我希望我能在这里找到一些帮助。

我想创建一个带有三个 "toggle" 图像形式按钮的小型垂直导航，以显示不同的内容。基本上，如果您单击 "toggle" 按钮，内容将放置在导航的右侧。

问题是我想在点击图像（"toggle" 按钮）时更改它。更重要的是，当另一个按钮被点击时，它会再次变回来。

这是我最近用来显示右边内容的代码：

$('.parent  div').hide();
$('.parent  div.a').show();

$('#mini-nav img').click(function () {
    console.log($(this).index('img'));
    var $div = $('.parent > div').eq($(this).index('#mini-nav img'));
    $div.show();
    $('.parent > div').not($div).hide();  
});

<div id="mini-nav">
    <img src="http://placehold.it/80x80"/>
    <img src="http://placehold.it/80x80"/>
    <img src="http://placehold.it/80x80"/>
    <img src="http://placehold.it/80x80"/>
</div>

<div class="parent">
    <div class="a">
        <p>this is a</p>
    </div>   
    <div class="b">
        <p>this is b</p>
    </div>
    <div class="c">
        <p>this is c</p>
    </div>
    <div class="d">
        <p>this is d</p>
    </div>
</div>

Answer 1

您可以这样做：

$('#mini-nav img').click(function() {
    // Mark all nav images as not selected
    $('#mini-nav img').removeClass('selected');

    // Hide all images
    $('.parent > div').hide();

    // Show the one the user wanted and set the class on the button
    var $btn = $(this);
    var index = $btn.index('#mini-nav img');
    $('.parent > div:eq(' + index + ')').show();
    $btn.addClass('selected');
});

如果图片处于活动状态，则更改图片，如果不活动，则更改回来

Change an image if its active, if not change back

javascript

css

navigation

jquery

onclick