CODEWITHSUNDEEP
htmlcssnav
Tom
Tom

Reputation: 159

Active page on a website?

I'm wanting to basically make it so that on my website when the user clicks on a navigation bar button it changes the image. Of which on the image I have set the text on the button to display in a different colour.

So far I've developed the following css:

#HomeOver
{
    width: 188px;
    height: 54px;
    background: url("Images/Navbar_01.gif");
}

#HomeOver:active 
{
    background: url("Images/NavbarOver_01.gif");
}


#HomeOver:hover
{ 
    background: url("Images/NavbarOver_01.gif");
}

The HTML then links the ID to the CSS to display the correct image.. But my problem is, on the "active", it doesn't seem to work, Can anyone suggest what is wrong with the coding? The hover works fine

Upvotes: 1

Views: 1623

Answers (5)

user3177566
user3177566

Reputation: 1

Use .addClass and .removeClass on click using jquery

Upvotes: 0

mekwall
mekwall

Reputation: 28974

If you don't wish to use JavaScript you can instead use input:radio instead.

HTML

<div id="links">
    <label><input type="radio" name="links" /><div class="image"></div></label>
    <label><input type="radio" name="links" /><div class="image"></div></label>
    <label><input type="radio" name="links" /><div class="image"></div></label>
</div>

CSS

#links input {
    display: none;
}

#links .image {
    background: url("Images/Navbar_01.gif");
}

#links label:hover .image,
#links input:checked ~ .image {
    background: url("Images/NavbarOver_01.gif");
}

See test case on jsFiddle.

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157414

:active pseudo only works when an element is kept clicked, as soon as you leave the click, the effect goes, you can achieve the active tabs, by either using client side scripting such as JavaScript/jQuery and assign a class to the intended element, or assign it by using server side scripting such as PHP.

Demo (How actually :active pseudo works)

Achieving this with jQuery...

Demo

var active_menu = $('nav a').click(function(){ //onclick of a nested inside nav 
    active_menu.removeClass('active'); //Remove all the classes first
    $(this).addClass('active'); //Assign the class to the a which is clicked
});

Upvotes: 4

Markus Kottl&#228;nder
Markus Kottl&#228;nder

Reputation: 8268

As Mr. Alien stated the pseude class :active does only work as long as you keep the mousebutton clicked. To achieve a permanent active state you will have to use jquery to change the class on click.

jsfiddle

js

$('div').click(function() {
    $(this).toggleClass('active');
});

css

div:active,
div.active {
    color: #f00;
}

or you have to give the acitve element the .active class when generating it serverside with php or so:

print '<div' . (active ? ' class="active"' : '') . '></div>'

Upvotes: 0

NewInTheBusiness
NewInTheBusiness

Reputation: 1475

#HomeOver.active {
    background: url("Images/NavbarOver_01.gif");
}

Then just add the "active" class to the navigation button either through JavaScript or directly in the html for the corresponding page.

Upvotes: 1

Related Questions