[英]Displaying HTML elements depending on which link is clicked
几天前我才刚刚开始学习Web开发，我想创建一个简单的页面来弄湿自己。 我想要一个顶部的导航栏，并根据单击哪个导航栏来显示某些HTML元素。 我使用switch语句关闭了所有其他元素，仅显示有问题的元素。
但是由于某种原因，它的行为不符合预期。
这是我的HTML代码：
<!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>
这是我的JavaScript代码：
//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; } }
它打印出调试消息，因此document.getElementById（“ Debug”）。innerHTML =“输入了切换条件0”; 可以，但是switch语句的其余部分没有执行。
有人可以告诉我我在做什么错吗？
将您的<p id="OpTimes">You have clicked on OpTimes</p>更改为<p id="Optimes">You have clicked on OpTimes</p> 。
该元素的ID应该是Optimes而不是OpTimes
我在Firefox 54中尝试了此代码，并且对我有用。 不过，我会OpTimes一条错误消息，因为OpTimes在您的HTML代码中定义了一个大T。 统一您的代码，它应该可以工作。 用OpTimes或Optimes替换所有Optimes 。
合并HTML页面（“主页”，“关于”，“联系人”），然后根据单击的链接显示它们（PHP？）？
[英]Merging HTML pages (Home, About, Contact,) then displaying them (PHP?) depending on link clicked?
如何根据单击哪个按钮动态删除特定对象的html元素？
[英]How to dynamicaly remove html elements for specific object depending on which button is clicked?
如何使用切换按钮根据单击的按钮显示元素？
[英]How to use a toggle button to show elements depending on which button was clicked?
是否可以链接到具有不同 CSS 条件的同一页面，具体取决于我单击的链接？
[英]Is it possible to link to the same page with different CSS conditions active, depending on which Link I clicked on?
使用onlick更改div类名称，更改3个div，具体取决于单击哪个链接div的链接
[英]Change div class name with onlick for 3 divs depending on which link div's link is clicked
React-生命游戏-根据用户单击的元素来更新2D数组中特定元素的状态
[英]React - Game of Life - Update state of specific elements in 2D array depending on which elements are clicked by user
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.