我想单击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 ，以获取正确的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的元素。 但是只有一个带有class sidebar的元素。

因此将$('#sidebar a')更改$('.sidebar a')