Question

我几天前刚刚开始学习网页开发，我想创建一个简单的页面让我的脚湿透。我想要一个顶部导航栏，根据单击哪一个，将显示某些HTML元素。我使用switch语句来关闭所有其他元素，只显示有问题的元素。

但出于某种原因，它的行为并不像预期的那样。

这是我的HTML代码：

＆＃13;

<!DOCTYPE html>

<html>
<head>
  <title>Care and Advice Clinic</title>
  <script type="text/javascript" src="backend.js"></script>
  <link rel = "stylesheet" type = "text/css" href = "stylesheet.css">
</head>

<body>
  <ul>
    <li><a href="#" onclick="javascript: StateMachine(1); return false;">
      Contact and Address
    </a></li>
    <li><a href="#" onclick="javascript: StateMachine(2); return false;">
      Operation Times
    </a></li>
    <li><a href="#" onclick="javascript: StateMachine(3); return false;">
      About
    </a></li>
    <li><a href="#" onclick="javascript: StateMachine(4); return false;">
      School of Diabetes
    </a></li>
  </ul>
  <h1 style = "font-size: 40px; padding-top: 30px;"> Diabetes Care and Advice</h1>
  <p id="Debug" style="font-size: 60px;"></p>
  <p id="Contact" style="font-size: 60px;">
    You have clicked on Contact and Address
  </p>
  <p id="OpTimes">You have clicked on OpTimes</p>
  <p id="About">You have clicked on About</p>
  <p id="School">You have clicked on School</p>
  <script>javascript: StateMachine(0);</script>
</body>
</html>

＆＃13;

这是我的javascript代码：

＆＃13;

//The states are Contact (1), OperationTimes (2), About(3), School(4), home(0)
StateMachine(index);

function StateMachine(index){

  switch(index){

    case 0:
      document.getElementById("Debug").innerHTML = "Switch case 0 entered";
      document.getElementById("Optimes").style.display = 'none';
      document.getElementById("About").style.display = 'none';
      document.getElementById("School").style.display = 'none';
      document.getElementById("Contact").style.display = 'none';
      break;

    case 1:
      document.getElementById("Debug").innerHTML = "Switch case 1 entered";
      document.getElementById("Optimes").style.display = 'none';
      document.getElementById("About").style.display = 'none';
      document.getElementById("School").style.display = 'none';
      document.getElementById("Contact").style.display = 'block';
      break;

    case 2:
      document.getElementById("Debug").innerHTML = "Switch case 2 entered";
      document.getElementById("Contact").style.display = 'none';
      document.getElementById("About").style.display = 'none';
      document.getElementById("School").style.display = 'none';
      document.getElementById("OpTimes").style.display = 'block';
      break;

    case 3:
      document.getElementById("Debug").innerHTML = "Switch case 3 entered";
      document.getElementById("Contact").style.display = 'none';
      document.getElementById("Optimes").style.display = 'none';
      document.getElementById("School").style.display = 'none';
      document.getElementById("About").style.display = 'block';
      break;

    case 4:
      document.getElementById("Debug").innerHTML = "Switch case 4 entered";
      document.getElementById("Contact").style.display = 'none';
      document.getElementById("Optimes").style.display = 'none';
      document.getElementById("About").style.display = 'none';
      document.getElementById("School").style.display = 'block';
      break;
  }


}

＆＃13;

它打印出调试消息，因此document.getElementById（＆＃34; Debug＆＃34;）。innerHTML =＆＃34;切换案例0输入＆＃34 ;;有效，但switch语句的其余部分未执行。

有人能告诉我这里做错了什么吗？

Answer 1

将您的<p id="OpTimes">You have clicked on OpTimes</p>更改为 <p id="Optimes">You have clicked on OpTimes</p> 。

此元素的ID应为 Optimes 而不是 OpTimes

Answer 2

我在Firefox 54中试过这个代码，它对我有用。不过我发了一条错误消息，因为OpTimes在HTML代码中定义了一个大T。统一您的代码，它应该工作。将所有出现次数替换为OpTimes或Optimes。

根据单击的链接显示HTML元素

2 个答案: