Question

我希望隐藏当点击另一个时使用 .toggle 显示的当前div。

当点击 .left 中的其他链接切换另一个div时，我希望当前显示在 .right 中的div消失并被替换用点击的那个。目前正在切换的div保持在那里直到切换 onclick ，我希望当从 .left

中选择另一个div时触发切换触发

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

道歉，如果我说得太厉害（对SO来说是新的）。很高兴相应地进行编辑。

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

Answer 1

将以下内容添加到function

中的代码中

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

这是JS fiddle

Answer 2

看看这个我很少编辑你的代码看到https://jsfiddle.net/7xt1d887/的现场演示希望它会对你有所帮助:)

添加此

$('.right .row').find('div').hide();

单击隐藏div

2 个答案: