javascript - 我想单击 div 链接并打开同一页面中其他 div 的信息

Question

我想单击一个 div 链接并打开同一页面中其他 div 的信息。但我没有得到预期的结果。

$("#sidebar a").click(function(e)
{
  e.preventDefault();
  $(".toggle").hide();
  var toShow = $(this).attr('href');
  $(toShow).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer">
    <div class="sidebar">
      <a href="#content1"</a><center>About NewLeaf</center><br>
      <a href="#content2"</a><center>Vission</center><br>
      <a href="#content3"</a><center>Cooperative Principles</center><br><br><br><br><br><br><br><br><br>	
    </div>

  <div id="article">
    <div id="content1" class="toggle" style="display:none">showknfdkjgbjbjdf the stuff1</div> 
    <div id="content2" class="toggle" style="display:none">show the gffstuff2</div>
    <div id="content3" class="toggle" style="display:none">show thegd stuff3</div>
  </div>
</div>

Answer 1

使用eq()函数切换相应的div。

注意:必须从 DOM 中删除断线br，才能获得正确的索引。请改用 CSS 样式。

$(".sidebar a").click(function(e) {
  e.preventDefault();
  $('.toggle').eq($(this).index()).toggle();
});

a {
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer">
  <div class="sidebar">
    <a href="#content1">
      <center>About NewLeaf</center>
    </a>
    <a href="#content2">
      <center>Vission</center>
    </a>
    <a href="#content3">
      <center>Cooperative Principles</center>
    </a>
  </div>

  <div id="article">
    <div id="content1" class="toggle" style="display:none">showknfdkjgbjbjdf the stuff1</div>
    <div id="content2" class="toggle" style="display:none">show the gffstuff2</div>
    <div id="content3" class="toggle" style="display:none">show thegd stuff3</div>
  </div>
</div>lt.