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を使用してください。

また、getElementByIdを繰り返し呼び出す代わりに、DOMノードを変数としてキャッシュする必要があります。

最後に、location.hashを使用して、どのページが選択されているかを判断する必要があります。

編集：Super User has pointed outとして、あなたのアンカータグの一つが、同様href="#ans2"の代わりhref="#ans1"をお読みください。しかし、このHTML間違いはあなたのトグルロジックには影響しません。あなたが#ans1参照が渡されている両方のリンクで

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

、あなたは2番目のリンクで#ans2を渡す必要があります。 はまた、あなたは私はあなたの助けに感謝の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>