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。您还必须为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>

Javascript - 使用锚标记

2 个答案: