Javascript - 使用 anchor 标记从外部链接显示隐藏的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

在两个链接中您都传递了#ans1 引用，您应该在第二个链接中传递#ans2。 您还必须为 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>