Question

我是使用JavaScript的新手。我是否正确使用以下脚本？

function func() {
  document.getElementById('div1').style.display = 'block'
  document.getElementById('div2').style.display = 'none'
  document.getElementById('div3').style.display = 'none'
  if ("div1") {
    document.getElementById('div1').style.display = 'block'
    document.getElementById('div2').style.display = 'none'
    document.getElementById('div3').style.display = 'none'
  }
  if ("div2") {
    document.getElementById('div1').style.display = 'none'
    document.getElementById('div2').style.display = 'block'
    document.getElementById('div3').style.display = 'none'
  }
  if ("div3") {
    document.getElementById('div1').style.display = 'none'
    document.getElementById('div2').style.display = 'none'
    document.getElementById('div3').style.display = 'block'
  }
}

<ul>
  <li><a class="active" href="#home" func()="div1">Home</a>
  </li>
  <li><a href="#SubmitNewRequest" func()="div2">Submit new request</a>
  </li>
  <li><a href="#SearchExisting" func()="div3">Search existing requests</a>
  </li>
</ul>

Answer 1

有一些事情：

HTML标签有一个名称（例如'a'或'div'），可能有属性（例如'id'，'href'等）。属性是键值对（例如id="croissant"或href="#head"）
假设您有意让用户点击链接以显示/隐藏div，您需要在锚元素上使用onclick属性。
```
# INCORRECT
func()="div1"

# CORRECT
onclick="func('div1')"
```
func JavaScript函数需要接受一个参数，以便您可以向函数调用发送信息（在这种情况下为div的名称）
JavaScript代码中的if语句应该计算为布尔条件：true或false。

基于这些，我调整了你给出的代码示例，以便它可以工作;点击“运行代码段”以查看其运行情况。这不一定是生产代码，但这应该更好地说明应该考虑的不同组件。

function func(div) {
  document.getElementById('div1').style.display = 'none'
  document.getElementById('div2').style.display = 'none'
  document.getElementById('div3').style.display = 'none'
  if (div == "div1") {
    document.getElementById('div1').style.display = 'block'
  }
  if (div == "div2") {
    document.getElementById('div2').style.display = 'block'
  }
  if (div == "div3") {
    document.getElementById('div3').style.display = 'block'
  }
}

#div1 {
  display:none;
}
#div2 {
  display:none;
}
#div3 {
  display:none;
}

<ul>
  <li><a class="active" href="#home" onclick="func('div1')">Home</a></li>
  <li><a href="#SubmitNewRequest" onclick="func('div2')">Submit new request</a></li>
  <li><a href="#SearchExisting" onclick="func('div3')">Search existing requests</a></li>
</ul>

<div id="div1">Content A</div>
<div id="div2">Content B</div>
<div id="div3">Content C</div>

我正确使用这个脚本吗？

1 个答案: