/    Sign up×
Community /Pin to ProfileBookmark

Changing Background colors on multiple Divs for Navigation

Need some help with Navigation.

When I click on a div – i would like the background color to change to gray.
When I click on another Div – I would like the background to chnage to gray, however it will also need to change the previous div (or all divs in that class) to a white background.

Any suggestions?

<html>
<head>
<title>test</title>

<script type=”text/javascript”>
function highlight(currentdiv) {
document.getElementById(currentdiv).style.backgroundColor=’#CCC’;
}
</script>

<style type=”text/css”>
.mybox {
display:block;
background:#ffc;
padding:5px;
border:1px solid red;
width:100px;
height:35px; cursor:pointer;
}
</style>
</head>

<body>

<div id=”P1″ class=”mybox” onClick=”highlight(‘P1’)”>1</div>
<div id=”P2″ class=”mybox” onClick=”highlight(‘P2’)”>2</div>
<div id=”P3″ class=”mybox” onClick=”highlight(‘P3’)”>3</div>
<div id=”P4″ class=”mybox” onClick=”highlight(‘P4’)”>4</div>
<div id=”P5″ class=”mybox” onClick=”highlight(‘P5’)”>5</div>

</body>

</html>

to post a comment
JavaScript

7 Comments(s)

Copy linkTweet thisAlerts:
@MikeOSSep 22.2010 — For simplicity all I've changed is the function.

[CODE]<html>
<head>
<title>test</title>

<script type="text/javascript">
function highlight(currentdiv) {
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
if (divs[i].id == currentdiv) {
divs[i].style.backgroundColor = "#CCC";
}
else {
divs[i].style.backgroundColor = "#ffc";
}
}
}
</script>

<style type="text/css">
.mybox {
display:block;
background:#ffc;
padding:5px;
border:1px solid red;
width:100px;
height:35px;
cursor:pointer;
}
</style>
</head>

<body>

<div id="P1" class="mybox" onClick="highlight('P1')">1</div>
<div id="P2" class="mybox" onClick="highlight('P2')">2</div>
<div id="P3" class="mybox" onClick="highlight('P3')">3</div>
<div id="P4" class="mybox" onClick="highlight('P4')">4</div>
<div id="P5" class="mybox" onClick="highlight('P5')">5</div>

</body>
</html> [/CODE]
Copy linkTweet thisAlerts:
@LuiNobregaauthorSep 22.2010 — It works Perfectly! Thanks for taking the time to help me out.

Excellent!!!
Copy linkTweet thisAlerts:
@MikeOSSep 23.2010 — Have added an additional if statement to ensure clicks do not effect the background colour of other divs that aren't part of the same css class group.

[CODE]<script type="text/javascript">
function highlight(currentdiv) {
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
if (divs[i].className == "mybox"){
if (divs[i].id == currentdiv) {
divs[i].style.backgroundColor = "#CCC";
}
else {
divs[i].style.backgroundColor = "#ffc";
}
}
}
}
</script>[/CODE]
Copy linkTweet thisAlerts:
@LuiNobregaauthorSep 23.2010 — Thanks for revisiting the post and the update.

I took the code you provided yesterday and added it to the real project.

Works like a champ! Thanks again.

Code posted below:

// This function is used to highlight the current page indicator for pagenav.cfm

function highlight(currentdiv) {

var divs = document.getElementsByClassName("pagenavitems");

for (var i = 0; i < divs.length; i++) {

if (divs[i].id == currentdiv) {

divs[i].style.backgroundColor = "#66CCFF";

}

else {

divs[i].style.backgroundColor = "#FFF";

}

}

}
Copy linkTweet thisAlerts:
@TrinixiaMay 23.2011 — Is there any way to have the first box automatically highlighted? This code works great for me. Just need that modification.
Copy linkTweet thisAlerts:
@JMRKERMay 23.2011 — Is there any way to have the first box automatically highlighted? This code works great for me. Just need that modification.[/QUOTE]

<i>
</i>&lt;body onload="highlight('P1')"&gt;
Copy linkTweet thisAlerts:
@TrinixiaMay 23.2011 — THANK YOU!

You are a lifesaver, JMRKER! Well all of you.
×

Success!

Help @LuiNobrega spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...