根據點擊哪個鏈接顯示HTML元素

我剛剛開始學習網絡開發前幾天，我想創建一個簡單的頁面讓我的腳溼。我想要一個頂部的導航欄，並根據哪個被點擊某個HTML元素將被顯示。我使用switch語句關閉所有其他元素，只顯示相關問題。根據點擊哪個鏈接顯示HTML元素

但是，由於某些原因，它不像預期的那樣工作。

這裏是我的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; 
 
    } 
 

 

 
}

它打印出調試msg so document.getElementById（「Debug」）。innerHTML =「Switch case 0 entered」;工作，但switch語句的其餘部分未執行。

有人能告訴我我在做什麼錯嗎？

來源

2017-08-03 Adit Hasan

似乎正在爲我工作，你有任何控制檯中的錯誤？ –

元素正在顯示時，他們不應該是，除非我點擊各自的鏈接。你不是和我一樣嗎？ –

對不起，我判斷過早，就像兩個答案都說，你需要在你的HTML中將大寫字母'T'改成更低的't' –

我在Firefox 54試過這個代碼，它爲我工作。不過，我輸入了一條錯誤消息，因爲OpTimes是在您的HTML代碼中使用大T定義的。統一你的代碼，它應該工作。用OpTimes或Optimes替換所有發生的事件。

來源

2017-08-03 07:38:29 Caesar2011

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

此元素的ID應該是Optimes沒有OpTimes

來源

2017-08-03 07:37:56 Zico

根據點擊哪個鏈接顯示HTML元素

回答

相關問題