javascript - 单击另一个后隐藏div

我想隐藏单击另一个时使用.toggle显示的当前div。

当通过单击.left中的另一个链接切换另一个div时，我希望当前显示在.right中的div消失并被单击的div代替。目前已切换的div停留在该位置，直到关闭onclick，我希望从.left中选择另一个div时触发该切换。

尝试使用.hide和if语句，但似乎无法使JS正常运行。如果有人能指出我正确的方向，那就太好了。

抱歉，我的措辞不好（对SO来说是新的）。很高兴进行相应的编辑。

JS fiddle

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="wrap">

  <div class="left">
    <div class="row">
      <div class="links">
        <a href="#">When this link is clicked, i want the first div to be shown</a>
        <a href="#">When this link is clicked, i want the second div to be shown</a>
        <a href="#">When this link is clicked, i want the third div to be shown</a>
        <a href="#">When this link is clicked, i want the fourth div to be shown</a>
      </div>
    </div>
  </div>
  <!--left-->

  <div class="right">
    <div class="row">
      <div>Content to be shown when the first link is clicked</div>
      <div>Content to be shown when the second link is clicked</div>
      <div>Content to be shown when the third link is clicked</div>
      <div>Content to be shown when the fourth link is clicked</div>
    </div>
  </div>
  <!--right-->

</div><!--wrap-->

CSS：

.links a {
  display: block;
}

.row > div:not(.links) {
  display: none;
}

.wrap {
  width: 1000px;
  height: 1000px;
}

.left {
  width: 500px;
  height: 1000px;
  float: left;
  display: inline;
}

.right {
  width: 500px;
  height: 1000px;
  float: right;
  display: inline;
}

.links a {
  width: 490px;
}

.links {
  margin-top: 20px;
}

JS：

var links = $('.links a');
links.on('click', function() {
  var n = links.index(this);
  $('.row > div:not(.links)').eq(n).toggle();
});

最佳答案

将以下内容添加到function中的代码中

 $('.row > div:not(.links)').hide();

这是JS fiddle