堆棧內存溢出
  簡體   English   中英

單擊CSS列表垂直菜單

[英]CSS List Vertical Menu on click

 原文  2017-04-11 14:13:34  4   5    javascript/ list/ switch-statement

問題描述

我對javascript很陌生。 我設置了一個包含2個iframe的頁面。

在左側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

5 個解決方案

解決方案1
 1 已采納  2017-04-11 16:30:22

您的JavaScript似乎很不錯，即使很冗長，但是從您的預覽鏈接可以看出，類名前的不間斷空格似乎有些時髦？ 我已經在Chrome的devtools中對其進行了測試（請參閱附件） -第一次JS調用使用的是從JavaScript復制的代碼，第二次是通過從HTML元素復制類名來完成的。

好像真的很奇怪！ 不確定如何將它們包括在內-可能值得回過頭來重寫每個元素ID。 這也似乎影響staffButton ， reportsButton和logoutButton了。

希望這可以幫助！

解決方案2
 0  2017-04-11 14:28:33

我認為您遇到了緩存問題。 代碼本身看起來不錯，但是您的瀏覽器可能尚未加載已編輯的頁面。

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

解決方案3
 0  2017-04-11 15:02:46

實際上，您可以像下面這樣大大縮短此時間。

腳本將以下內容寫在腳本中 

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

a標簽中的所有onClick更改為如下所示 

<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>

並保持您的樣式和html的其余部分不變。 希望這可以幫助。

解決方案4
 0  2017-04-11 15:10:50

我認為問題可能出在您通過類更改背景，而該類對於ID或類似的內容並不理想。

您可以嘗試以下方法：

a：active {

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

或者您可以像這樣使用javascript來更改背景，因為無論如何您要分別更改所有按鈕： 

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

我希望能解決。

解決方案5
 0  2017-04-11 16:16:25

根據鏈接的控制台，您的代碼中有一個錯字。 

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";

它說錯誤是按成員所在的行進行的，這解釋了為什么在此結束。 只有我自己看不到錯誤，所以如果有人看到它，那就是答案。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何使用 css 和 html 在單擊垂直側邊欄菜單時顯示子列表？ 垂直CSS幻燈片菜單可在點擊時向上推動網站 單擊時的垂直下拉菜單 垂直菜單CSS3 CSS側面垂直菜單過渡 使用CSS對垂直子菜單進行動畫處理 兩側的CSS垂直菜單 CSS響應菜單單擊 單擊時隱藏CSS菜單 垂直Accordian菜單單擊時重置活動狀態
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM