Question

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

Answer 1

你的JavaScript似乎听起来很冗长，但是从我的预览链接中我可以看出，在你的类名之前，似乎有一些非破坏性的空格吗？ I've tested it in Chrome's devtools (see attached) - 第一个JS调用使用从JavaScript复制的代码，第二个是通过从HTML元素复制类名来完成的。

虽然看起来很奇怪！不确定它们是如何被包含在内的 - 可能只值得返回并重写每个元素ID。它似乎也会影响staffButton，reportsButton和logoutButton。

希望这有帮助！

Answer 2

我认为您遇到了缓存问题。代码本身似乎很好，但您的浏览器可能没有加载已编辑的页面。

尝试刷新您的网页几次。使用F12（开发人员工具）查看是否加载了正确的代码。

Answer 3

实际上你可以像下面这样缩短它。

<强>脚本在脚本中写下这些

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>

保持你的风格和html的其余部分。希望这会有所帮助。

Answer 4

我认为问题可能是你通过一个类改变了背景，这个类不像ID那样。

你可以试试这个：

a：活跃{

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

一样

或者您可以使用这样的javascript来更改背景，因为您无论如何都要分别更改所有按钮：

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

我希望能解决它。

Answer 5

根据链接的控制台，您的代码中会出现拼写错误。

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

它说错误是由成员的行，这解释了为什么它在那里结束。只有我自己没有看到错误，所以如果有其他人认为这就是答案。

单击CSS列表垂直菜单

5 个答案: