Question

我想点击一个divs链接并打开同一页面中其他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，才能正确indexes。请改用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.

Answer 2

您正在寻找ID为sidebar的元素。但是只有一个类sidebar的元素。

所以将$('#sidebar a')更改为$('.sidebar a')

我想点击divs链接并打开同一页面内其他div的信息

2 个答案: