Javascript-使用錨標記顯示來自外部鏈接的隱藏div

Question

我已經從該站點嘗試了許多事情，但無法使我的JavaScript終生可用。 有人可以看看我的代碼並告訴我我所缺少的內容嗎？ 我是Java的新手。 我將不勝感激。

 var url = window.location.href; if (url.indexOf("/ans1/") > -1) { document.getElementById('ans2').style.display = 'none'; document.getElementById('ans1').style.display = 'true'; } else if (url.indexOf("/ans2/") > -1) { document.getElementById('ans1').style.display = 'none'; document.getElementById('ans2').style.display = 'true'; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="faq-row"> <div class="container"> <h2 class="row-heading">Frequently Asked Questions</h2> <ul class="faq"> <li class="faq-item"><a href="#ans1" class="faq-item-toggle"><i class="fa fa-angle-down faq-toggle-arrow"></i>OAC FAQ 1</a> <div id="ans1" class="faq-item-answer"><a href="ans1"> Answer.</a> </div> </li> <li class="faq-item"><a href="#ans1" class="faq-item-toggle"><i class="fa fa-angle-down faq-toggle-arrow"></i>OAC FAQ 1</a> <div id="ans2" class="faq-item-answer"><a href="ans2"> Answer. </a> </div> </li> </ul> </div> </div> 

Answer 1

display: true不是有效的CSS規則。 使用display: block代替。

另外，您可能應該將DOM節點緩存為變量，而不是重復調用getElementById 。

最后，您應該使用location.hash來確定選擇了哪個頁面。

編輯：正如超級用戶指出的那樣 ，您的錨標記之一也應讀取href="#ans2"而不是href="#ans1" 。 不過，此HTML錯誤不應影響您的切換邏輯。

 var hash = location.hash; var ans1 = document.getElementById('ans1') var ans2 = document.getElementById('ans2') if (hash === '#ans1') { ans2.style.display = 'none' ans1.style.display = 'block' ans1.previousElementSibling.click() } else if (hash === '#ans2') { ans1.style.display = 'none' ans2.style.display = 'block' ans2.previousElementSibling.click() } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="faq-row"> <div class="container"> <h2 class="row-heading">Frequently Asked Questions</h2> <ul class="faq"> <li class="faq-item"> <a href="#ans1" class="faq-item-toggle"> <i class="fa fa-angle-down faq-toggle-arrow"></i> OAC FAQ 1 </a> <div id="ans1" class="faq-item-answer"> <a href="ans1">Answer.</a> </div> </li> <li class="faq-item"> <a href="#ans2" class="faq-item-toggle"> <i class="fafa-angle-down faq-toggle-arrow"></i> OAC FAQ 2 </a> <div id="ans2" class="faq-item-answer"> <a href="ans2">Answer.</a> </div> </li> </ul> </div> </div> 

Answer 2

在兩個鏈接中，您都傳遞了#ans1參考，您應在第二個鏈接中傳遞#ans2 。 另外，您還必須設置display: block javascript的display: block屬性

 var url = window.location.href; if (url.indexOf("/ans1/") > -1) { document.getElementById('ans2').style.display = 'none'; document.getElementById('ans1').style.display = 'block'; } else if (url.indexOf("/ans2/") > -1) { document.getElementById('ans1').style.display = 'none'; document.getElementById('ans2').style.display = 'block'; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="faq-row"> <div class="container"> <h2 class="row-heading">Frequently Asked Questions</h2> <ul class="faq"> <li class="faq-item"><a href="#ans1" class="faq-item-toggle"><i class="fa fa-angle-down faq-toggle-arrow"></i>OAC FAQ 1</a> <div id="ans1" class="faq-item-answer"><a href="ans1"> Answer.</a> </div> </li> <li class="faq-item"><a href="#ans2" class="faq-item-toggle"><i class="fa fa-angle-down faq-toggle-arrow"></i>OAC FAQ 1</a> <div id="ans2" class="faq-item-answer"><a href="ans2"> Answer. </a> </div> </li> </ul> </div> </div>