Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

How do I keep a clicked navigation button highlighted?

onlie printing

Best Answer dargueta, 28 November 2014 - 01:34 AM

Change the background color in overviewPane(), like so:

var button = document.getElementById("navButtonOverview");
button.style.backgroundColor = "red";

document.getElementById() retrieves the button object from the DOM and allows you to manipulate its CSS (among a ton of other things).

Go to the full post


This topic has been archived. This means that you cannot reply to this topic.
2 replies to this topic

#1 Alejandro

Alejandro

    CC Lurker

  • New Member
  • Pip
  • 9 posts

Posted 27 November 2014 - 03:20 AM

I have a row of buttons in my nav bar, all like this one:

<a href="#"><div id="navButtonOverview" class="navbutton" onclick="overviewPane()" />Overview</div></a>

How do I make the button stay a certain color after they click on it? (It is to emphasize the tab/page unity.)

I thought it would be by:

.navbutton:active { background-color: red;
}

... but that doesn't change anything on button click. As part of the onclick innerHTML in the JavaScript, I added:

+ "<style type='text/css'>#navButtonOverview{ background-color: #93c2e9; }</style>"

... but the style did not change.

What else should I try?



#2 dargueta

dargueta

    I chown trolls.

  • Moderator
  • 4854 posts

Posted 28 November 2014 - 01:34 AM   Best Answer

Change the background color in overviewPane(), like so:

var button = document.getElementById("navButtonOverview");
button.style.backgroundColor = "red";

document.getElementById() retrieves the button object from the DOM and allows you to manipulate its CSS (among a ton of other things).


Edited by dargueta, 28 November 2014 - 01:34 AM.

sudo rm -rf / && echo $'Sanitize your inputs!'


#3 Alejandro

Alejandro

    CC Lurker

  • New Member
  • Pip
  • 9 posts

Posted 28 November 2014 - 03:26 AM

Change the background color in overviewPane(), like so:

var button = document.getElementById("navButtonOverview");
button.style.backgroundColor = "red";

document.getElementById() retrieves the button object from the DOM and allows you to manipulate its CSS (among a ton of other things).

 

Thanks for help






Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download