Javascript - 從外部鏈接顯示隱藏的div與錨標記

Question

我已經嘗試了很多東西從這個網站，並不能讓我的JavaScript爲我的生活工作。有人可以看看我的代碼，並告訴我我錯過了什麼。我對JavaScript很陌生。我會很感激任何見解。

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來確定哪個頁面已被選中。

編輯：作爲Super User has pointed out，你的錨標籤應該讀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

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>