javascript - 如何使用 jQuery 仅突出显示选定的缩略图？

Question

这是我要完成的截图:

这是 html 的片段:

<section id="obstacles">
    <div class="row">
      <div class="large-3 columns">
        <a href="#">
          <div class="box inactive topBox" id="theTank">
            <img src="http://fpoimg.com/150x150">
          </div>
        </a>
      </div>
      <div class="large-3 columns end">
        <a href="#">
          <div class="box inactive topBox rightBox" id="sundaeSlide">
            <img src="http://fpoimg.com/150x150">
          </div>
        </a>
      </div>
    </div>

    <div class="row">
      <div class="large-3 columns">
        <a href="#">
          <div class="box inactive" id="hamster">
            <img src="http://fpoimg.com/150x150">
          </div>
        </a>
      </div>
      <div class="large-3 columns end">
        <a href="#">
          <div class="box inactive rightBox" id="downTheHatch">
            <img src="http://fpoimg.com/150x150">
          </div>
        </a>
      </div>
    </div>

    <div class="row">
      <div class="large-6 columns large-offset-6">
        <a href="#"><img id="smallSlime" src="/assets/otherAssets/smallSlime.png"></a>
      </div>
    </div>
    <div class="row">
      <div class="large-6 columns large-offset-6">
        <a href="#">
          <hgroup>
            <h2>Down the Hatch</h2>
            <h3>6ft Slide Covered in Gunk!</h3>
          </hgroup>
        </a>
      </div>
    </div>


  </section>

这是我用来更改右侧显示的大图片的 jQuery:

$(document).ready(function() {

    $("#theTank").click(function(event){
        event.preventDefault();
        $('.largeObstacles').html("<img src='/assets/obstacles/the-tank.png' />");
        $(this).toggleClass('active inactive');
    })

    $("#sundaeSlide").click(function(event){
        event.preventDefault();
        $('.largeObstacles').html("<img src='/assets/obstacles/sundae-slide.png' />");
        $(this).toggleClass('active inactive');
    })

    $("#hamster").click(function(event){
        event.preventDefault();
        $('.largeObstacles').html("<img src='/assets/obstacles/hamster-wheel.png' />");
        $(this).toggleClass('active inactive');
    })

    $("#downTheHatch").click(function(event){
        event.preventDefault();
        $('.largeObstacles').html("<img src='/assets/obstacles/down-the-hatch.png' />");
        $(this).toggleClass('active inactive');
    })

    $("#pickIt").click(function(event){
        event.preventDefault();
        $('.largeObstacles').html("<img src='/assets/obstacles/pick-it.png' />");
        $(this).toggleClass('active inactive');
    })

    $("#theWringer").click(function(event){
        event.preventDefault();
        $('.largeObstacles').html("<img src='/assets/obstacles/the-wringer.png' />");
        $(this).toggleClass('active inactive');
    })
})

现在，当我单击左侧的缩略图时，背景变为黄色，正确的大图像显示在右侧。但是，当我单击另一个图像时，突出显示的图像仍然突出显示。我确信有一个简单的解决方法，我只是不确定如何遍历 DOM 来做我想做的事。非常感谢任何帮助!

Answer 1

怎么样:

$(".active").toggleClass("active inactive");

将此添加为点击函数中的第一行。