堆栈内存溢出
  繁体   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