點擊CSS列表垂直菜單

我對JavaScript很陌生。我已經建立了一個包含2個iframe的頁面。點擊CSS列表垂直菜單

左邊的iframe是一個垂直菜單，右邊的iframe是點擊列表項時顯示的內容。

內容在框架中載入成功，但我試圖改變列表項目被點擊時的背景顏色。

下面的代碼與我期望的列表中的前兩個項目一樣。但是，當我單擊「成員搜索」時，將使用默認情況下的任何按鈕都不會更改顏色。

有誰知道爲什麼？

<html> 
<head> 
<meta charset="UTF-8"> 
<script> 
function menuClicked(button) { 

var Button = button; 

switch (Button) { 

case "queue": 

     document.getElementById("queueButton").className = "active"; 
     document.getElementById("tickerButton").className = "notactive"; 
     document.getElementById("memberButton").className = "notactive"; 
     document.getElementById("staffButton").className = "notactive"; 
     document.getElementById("settingsButton").className = "notactive"; 
     document.getElementById("reportsButton").className = "notactive"; 
     document.getElementById("logoutButton").className = "notactive"; 
     break; 

case "ticker": 

     document.getElementById("queueButton").className = "notactive"; 
     document.getElementById("tickerButton").className = "active"; 
     document.getElementById("memberButton").className = "notactive"; 
     document.getElementById("staffButton").className = "notactive"; 
     document.getElementById("settingsButton").className = "notactive"; 
     document.getElementById("reportsButton").className = "notactive"; 
     document.getElementById("logoutButton").className = "notactive"; 
     break; 

case "member": 


     document.getElementById("queueButton").className = "notactive"; 
     document.getElementById("tickerButton").className = "notactive"; 
     document.getElementById("memberButton").className = "active"; 
     document.getElementById("staffButton").className = "notactive"; 
     document.getElementById("settingsButton").className = "notactive"; 
     document.getElementById("reportsButton").className = "notactive"; 
     document.getElementById("logoutButton").className = "notactive"; 
     break; 

default: 
     document.getElementById("queueButton").className = "active"; 
     document.getElementById("tickerButton").className = "notactive"; 
     document.getElementById("memberButton111").className = "notactive"; 
     document.getElementById("staffButton").className = "notactive"; 
     document.getElementById("settingsButton").className = "notactive"; 
     document.getElementById("reportsButton").className = "notactive"; 
     document.getElementById("logoutButton").className = "notactive"; 
     break; 
} 


} 
</script> 
<style> 
body { 
    margin: 0; 
} 


ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    background-color: #373946; 
    position: fixed; 
    height: 80%; 
    overflow: auto; 
} 

li a { 
    display: block; 
    color: #6b6b6b; 
    padding: 8px 16px; 
    text-decoration: none; 
    font-family: "Helvetica"; 
} 

li a.active { 
    background-color: #dd3a78; 
    color: white; 
} 

li a:hover:not(.active) { 
    background-color: #555; 
    color: white; 
} 



div { 
    height: 20%; 
    width: 100%; 
    background-color: #373946; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
} 

</style> 
</head> 
<body> 

<div id="queue" style=" vertical-align: middle;"> 
<img src="/sms/images/asmlogo.png" height="100" width="100" > 
</div> 

<ul> 
    <li><a id="queueButton" href="/sms/frames/piles2.php" onclick="menuClicked('queue')" STYLE="text-decoration: none" target="main">Message Queue</a></li> 
    <li><a id="tickerButton" href="/sms/frames/ticker2.php" onclick="menuClicked('ticker')" STYLE="text-decoration: none" target="main">Message Ticker</a></li> 
    <li><a id="memberButton" href="/sms/frames/piles3.php" onclick="menuClicked('member')" STYLE="text-decoration: none" target="main">Member Search</a></li> 
    <li><a id="staffButton" href="/sms/frames/ticker2.php" onclick="menuClicked('staff')" STYLE="text-decoration: none" target="main">Staff</a></li> 
    <li><a id="settingsButton" href="/sms/frames/ticker2.php" onclick="menuClicked('settings')" STYLE="text-decoration: none" target="main">Settings</a></li> 
    <li><a id="reportsButton" href="/sms/frames/ticker2.php" onclick="menuClicked('reports')" STYLE="text-decoration: none" target="main">Reports</a></li> 
    <li><a id="logoutButton" href="/sms/frames/ticker2.php" onclick="menuClicked('logout')" STYLE="text-decoration: none" target="main">Log Out</a></li> 
</ul> 
</body> 
</html>

編輯：此鏈接

代碼：

https://www.asmserver.co.uk/sms/frames/menu2.html

來源

2017-04-11 MattBlack

您的JavaScript似乎聽起來很長，但從我的預覽鏈接中可以看出，似乎在您的類名之前會出現一些不間斷的空格。 I've tested it in Chrome's devtools (see attached) - 第一個JS調用是使用從JavaScript中複製的代碼，第二個是通過從HTML元素中複製類名來完成的。

雖然看起來很奇怪！不知道他們是如何被納入的 - 可能只是值得回頭去重寫每個元素ID。它似乎也影響staffButton,reportsButton和logoutButton。

希望這會有所幫助！

來源

2017-04-11 16:30:22 lyndsherb

不知道那裏發生了什麼，但排序感謝你:) – MattBlack

誰知道 - 這絕對是我見過的怪異邊緣案例之一！很高興我能提供幫助：D祝您在編碼旅程中好運！ – lyndsherb

我認爲你從一個緩存的問題受到影響。代碼本身看起來不錯，但您的瀏覽器可能沒有加載編輯過的頁面。

嘗試刷新您的頁面幾次。使用F12（開發人員工具）查看是否加載了正確的代碼。

來源

2017-04-11 14:28:33

嗨Rogier，感謝您的回覆，我嘗試了幾次硬刷新，甚至在不同的機器/設備/瀏覽器上加載它，我仍然有同樣的問題。我很困惑。 – MattBlack

其實你可以像下面那樣縮短它。

腳本在下面的腳本寫這些

var resetAll = function() { 
    document.getElementById("queueButton").className = "notactive"; 
    document.getElementById("tickerButton").className = "notactive"; 
    document.getElementById("memberButton").className = "notactive"; 
    document.getElementById("staffButton").className = "notactive"; 
    document.getElementById("settingsButton").className = "notactive"; 
    document.getElementById("reportsButton").className = "notactive"; 
    document.getElementById("logoutButton").className = "notactive"; 
} 


var menuClicked = function(button) { 
    resetAll(); 
    button.className = 'active'; 
}

HTML

改變所有的onClick在a標籤看起來像下面

<li> <a id="queueButton" href="/sms/frames/piles2.php" onclick="menuClicked(this)" STYLE="text-decoration: none" target="main">Message Queue</a></li> 

<li><a id="tickerButton" href="/sms/frames/ticker2.php" onclick="menuClicked(this)" STYLE="text-decoration: none" target="main">Message Ticker</a></li>

，並保持你風格和休息o f就是html。希望這可以幫助。

來源

2017-04-11 15:02:46 Panther

我認爲這個問題可能是你通過一個類來改變背景，而這個類對於一個ID或類似的東西是不適用的。

你可以試試這個：

一：積極{

像在本教程中https://www.w3schools.com/cssref/sel_active.asp

，或者你可以使用JavaScript這樣的改變的背景下，因爲你是seperatly改變所有的按鈕無論如何：

document.getElementById("queueButton").style.backgroundColor = "#dd3a78";

我希望能解決它。

來源

2017-04-11 15:10:50 MAXaddictable

嗨馬克斯，我也試過這個，但仍然沒有炒作，我已經編輯了一個jsfiddle的問題，如果你會友善地看一看:) – MattBlack

我剛看了小提琴，第一個鏈接獲取點擊時的背景顏色，並保持它直到另一個被點擊。不是你想要的嗎？你只需要複製其他按鈕，或者說點擊的鏈接獲得了一個背景顏色：this.style.backgroundColor =「＃dd3a78」; – MAXaddictable

嗨，是的，這是即時通訊後，但多數民衆贊成沒有如何它的工作在這一刻：http://www.asmserver.co.uk/sms/frames/menu2.html根據控制檯 – MattBlack

根據鏈接的控制檯，您的代碼中存在拼寫錯誤。

case "queue": 

    document.getElementById("queueButton").style.backgroundColor = "#dd3a78"; 
    document.getElementById("tickerButton").style.backgroundColor = "#373946"; 
    document.getElementById("memberButton").style.backgroundColor = "#373946"; 
    document.getElementById("staffButton").style.backgroundColor = "#373946"; 
    document.getElementById("settingsButton").style.backgroundColor = "#373946"; 
    document.getElementById("reportsButton").style.backgroundColor = "#373946"; 
    document.getElementById("logoutButton").style.backgroundColor = "#373946";

它說錯誤是由成員的行，這解釋了爲什麼它在那裏結束。只有我自己沒有看到錯誤，所以如果有人認爲這是答案。

來源

2017-04-11 16:16:25 MAXaddictable

點擊CSS列表垂直菜單

回答

相關問題