CODEWITHSUNDEEP
javascripthtmlcss
Noumi
Noumi

Reputation: 315

How to change the background of selected link?

I am using <ul><li></li></ul> I want to change the background of the selected <li> or page. Please guide me which solution is best for this and please also provide any helping material.

Thanks.

Upvotes: 0

Views: 2012

Answers (4)

Shailender Arora
Shailender Arora

Reputation: 7778

Hi you can use this trick

#menuspace li.active a { background:#fff; color:#2175bc;

or see the live example :- http://jsfiddle.net/3XzVF/2/

Upvotes: 1

Tim M.
Tim M.

Reputation: 54377

Activation

If you want to change the style of the list item when it is activated, use the pseudo-class :active.

Example: http://jsfiddle.net/srGGc/

Note that activation is not the same as selection.

The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it. On systems with more than one mouse button, :active applies only to the primary or primary activation button (typically the "left" mouse button), and any aliases thereof.

Source: http://www.w3.org/TR/selectors4/#active-pseudo

Selection

If you want to mark the list item as selected when you are on its corresponding page, you can do that client-side with JavaScript that checks the URL and sets the class name on the LI.

if( window.location.href.lastIndexOf("jshell.net") != -1 )
{
    document.getElementById("foo").className = "activeItem";
}​

Full example: http://jsfiddle.net/j4DXb/1/

You can also set a class name server-side (this is usually my preferred method).

Upvotes: 0

richardevcom
richardevcom

Reputation: 1058

So if you want to add background to active li you should add :active to li. The :active selector is used to select and style the active link.

li:active{
  background:#fff;
}

define this in your stylesheet you can change :active to :hover

heres the tutorial you may need http://www.w3schools.com/css/css_pseudo_classes.asp

P.S. You always should check stack archive or google your question first as this question is very common.

Upvotes: 0

joni_demon
joni_demon

Reputation: 666

maybe you need something like this

    $('li').click(function(){

       $(this).css({'background-color':'red'});
    });

Upvotes: 0

Related Questions