![](/img/trans.png)
[英]Add two divs on the same page, each containing a link which hides it's parent div and shows the other one
[英]I want to click on divs link and open info on other div within same page
我想單擊一個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>
使用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.
您正在尋找具有id sidebar
的元素。 但是只有一個帶有class sidebar
的元素。
因此將$('#sidebar a')
更改$('.sidebar a')
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.