CSS List Vertical Menu on click
Question
I am very new to javascript. I have set up a page with 2 iframes.
In the left iframe is a vertical menu and in the right iframe is the content to be shown when the list item is clicked.
The content loads in the frame successfully but I am trying to change the background color of the list item when it is clicked.
With the code below is does as I expect with the first two items in the list.However when I click the 'member search' the default case is used and any buttons below this one will not change color.
Does anyone know why?
<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>
EDIT:
Codes on this link:
5 answers
solution1
1 ACCPTED 2017-04-11 16:30:22
Your JavaScript seems sound, if lengthy, but from what I can tell from your preview link, there seems to be something funky going on with non-breaking spaces before your classnames? I've tested it in Chrome's devtools (see attached) - the first JS call was using code copied from your JavaScript, the second was done by copying the class name from the HTML element.
Seems like a really weird thing though! Not sure how they'd have gotten included in that - may just be worth going back and rewriting each element ID. It also seems to affect staffButton , reportsButton and logoutButton too.
Hope this helps!
solution2
0 2017-04-11 14:28:33
I think you suffer from a caching issue. The code itself seems fine, but your browser might not have loaded the edited page.
Try to refresh your page a few times. Use F12 (developer tools) to see if the right code is loaded.
solution3
0 2017-04-11 15:02:46
Actually you can much shorten this like below.
Script Write these below in your script
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
Change all the onClick in the a tag to look like below
<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>
And keep your styles and rest of the html as it is. Hope this helps.
solution4
0 2017-04-11 15:10:50
I think the problem might be that your changing the background through a class, which is unsuppirior to an ID or something like that.
you could try this:
a :active {
like in this tutorial https://www.w3schools.com/cssref/sel_active.asp
or you could use javascript like this to change the background, since you are changing all the buttons seperatly anyway:
document.getElementById("queueButton").style.backgroundColor = "#dd3a78";
I hope that solves it.
solution5
0 2017-04-11 16:16:25
According to the console of the link, you have a typo in your code.
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";
It says that the error is by the line of member, which explains why it ends there. Only I do not see the error myself so if anyone else sees it thats the answer.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.