How do I keep a clicked navigation button highlighted?

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?

First of all, block elements like divs can’t be inside of inline elements like anchors. So that’s invalid.

:active pseudo class refers to when it is in the active state, e.g. when a user clicks on the link. You can use :target?

<!DOCTYPE html>
div:target {
    border: 2px solid #D4D4D4;
    background-color: red

<a href="#here">Jump to New content 1</a>
<div id="here">This will get red background on click</div>

Is this right? Nothing happens when clicked:

.navbutton:target {
    background-color: #93c2e9;

If you are still using the HTML from post #1, it does not match mine.

Hmmm. Lets THINK about this for a moment.

  1. if you are NOT using HTML5, then having an A tag around a DIV is not valid. ( So the big question is what is your doctype? ( either way, I, personally, never wrap A’s around block elements)

  2. There is nothing wrong with using #s for navigation; just remember they will add to your history ( this may or may not be acceptable)

  1. for the above reason, I would stick with .js

  2. for the question follows… where is your overviewPane() function? the onClick merely CALLs a script. If you don’t have the overviewPane() function somewhere nothing will happen.

  3. i would suggest:

    class=“navbutton” onclick=“overviewPane(this)” />Overview

    var clickedBuffer=null;
    function overviewPane(obj){
    if typeOf(clickedBuffer) === null {
    /* note the class name contains a black character before and after the word !! /
    clickedBuffer.className.replace(’ active ‘,’');
    obj.className= obj.className + ’ active ';
    return false; /
    ONLY if you want the button not to lead to another HTML doc*/

.activ {} to define your clicked styles. hope that helps

1)The element .navbutton is the div in question and divs don’t have active states. Only anchors and inputs have active states. Therefore to create an active style you would address the anchor instead.
2) The active state is that moment that you click the element. When you release the click then it is no longer active and any styles applied will disappear.

  1. The :focus state is when the element has been clicked and retains :focus until another element has been clicked or the page moves to a new location.

  2. You can create a’ focusable’ element by setting a tabindex on the element but again it will only remain highlighted hwile that element is in :focus.

  3. It sounds like you want a js solution as mentioned by Dresden above :smile:

The onclick calls a script, and the script writes innerhtml. So each tab will simply write a different innerhtml content in the pane below.

That’s why I was puzzled as to why the following innerhtml did not work to style the tab that was clicked:

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

To make my code more semantic, I changed the anchors and divs to buttons:

<div class="navigationBox">
<button id="navButtonOverview" class="navbutton" onclick="overviewPane()">Overview</button>     
<button id="navButtonSpecs" class="navbutton2" onclick="specsPane()">More Info</button>
 <button id="navButtonManuals" class="navbutton" onclick="manualsPane()">Manuals</button> 
<button id="navButtonParts" class="navbutton2" onclick="partsPane()">Buy Now</button>

So a function would write the innerhtml:

    function manualsPane() { "use strict";
    document.getElementById('contentArea').innerHTML = "<p class='itemSubhead'>Manuals</p><p><a href='/pictures/29260_sound_light/29260.pdf' target='_blank'>#29260 Guide</a></p>"
+ "<style type='text/css'>#navButtonManuals{ background-color: #93c2e9; }</style>";

Replacing the last part with the following does not work either:

+ "document.getElementById('navButtonManuals').style.background-color='#93c2e9'";

The first part writes the content successfully; the styling does not. I hope this explains more clearly where the code stands. I haven’t encountered code #2 and #5 before, so I’m at a loss as to how to implement it.

OK, I can’t use the document.getElementById the way I have it, because it isn’t being executed as JS, but as innerhtml.

So I broke it up into two functions, with the first function making the color change and calling the innerhtml function that writes the content:

function manualsPane() {
    document.getElementById('navButtonManuals').style.color='#93c2e9'; // style the button
    chgButtonManuals(); // call function to write the content with innerhtml

This works, so I am on the right track! However, I want to change the css background-color, not the text color. Changing “color” to background-color, backgroundcolor and background_color do not work.

The answer on this page under “More Examples” (using backgroundColor) does not work for me:

Assuming that there are no more specific styles (styles that use !important) and that you are targeting the correct element then style.backgroundColor is what you need.


Of course if you have inner elements that have a background colour also then you won’t see the colour you are adding.

We’d probably need to see the page in question to help further :slight_smile:

I got them to style by enlarging when clicked. I’d like to make then change color, though.

I have them styled in the CSS to have a gradient, so maybe that’s why the JS approach doesn’t work?

If you are applying a background-color then you won’t see it because your gradient will cover it up. You need to remove the gradient which can be done by using … ‘style.background =’#f00’ instead of style.backgroundColor=. The shorthand ‘background’ will set the other background properties to their default.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.