Question

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

我想用三个＆＃34;切换＆＃34;创建一个小的垂直导航。按钮以图像的形式显示不同的内容。基本上，如果你点击＆＃34;切换＆＃34;按钮，内容将放在导航的右侧。

问题在于，如果点击了图像，我想要更改图像（＆＃34;切换＆＃34;按钮）。更重要的是，当点击另一个按钮时，它会再次改变它。

这是我最近在右侧显示内容的代码：

$('.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>

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

如果图像处于活动状态，则更改图像（如果不更改）

1 个答案: