ansaurus

Question

How to change link's color when link is selected?

Answer 1

+1 A:

You could remove the "return false" from the accepted answer in the post you have linked to. By having "return false" there, the default action of the link is prevented from happening.

I have also posted a modified version of the code from the original post and accepted solution to avoid looping over all the links in the document.

<head>
<script>
var selectedEl;

document.onclick = function(evt)
{
    var el = window.event? event.srcElement : evt.target;
    if (el && el.className == 'unselected')
    {
        // Change the last selected element to unselected
        selectedEl.className = 'unselected';
        // Change the selected element to the current element
        selectedEl = el;
        // Change the classname of the selected element to 'selected'
        selectedEl.className = 'selected';
    }
}
</script>
<style>
 .selected { background: #f00; }
</style>
</head>
<body>
    <a href="#" class="selected">One</a> 
    <a href="#" class="unselected">Two</a> 
    <a href="#" class="unselected">Three</a>
</body>

aip.cd.aish 2009-11-02 02:08:40

Answer 2

A:

$("a.selector").click(function()
{
    $("a.focused").removeClass('focused');
    $(this).addClass('focused');

    // do other click event stuff...

    return false;
});

Aaron 2009-11-02 02:09:19

Answer 3

A:

Using the jQuery Javascript plugin you should be able to use the following code to achieve the desired effect:

$("a").click(function()
{
     $("a.clicked").removeClass("clicked")
     $(this).addClass("clicked");
}

andyg 2009-11-02 12:55:02

Answer 4

A:

If you want to use this to show the user which sub-page on your site he/she is on, you have to use some sort of serverside-coding (Examples: PHP, ASP, ASP.NET, Python, Ruby or similar) to assign a specific class to the element corresponding with the current page.

The reason for this is, that Javascript cannot be stored between different page loads, so when the link is clicked and changed with Javascript, this will be reset when the new page (that you just requested) is loaded.

If your site consists of just a few flat HTML-pages, you're best off by adding the classes to the correct menu items manually.

Example of how you can arrange your menu:

page1.html

<ul id="menu">
    <li><a href="page1.html" class="activeSection">Menuitem 1</a></li>
    <li><a href="page2.html">Menuitem 2</a></li>
    <li><a href="page3.html">Menuitem 3</a></li>
    <li><a href="page4.html">Menuitem 4</a></li>
</ul>

page2.html

<ul id="menu">
    <li><a href="page1.html">Menuitem 1</a></li>
    <li><a href="page2.html" class="activeSection">Menuitem 2</a></li>
    <li><a href="page3.html">Menuitem 3</a></li>
    <li><a href="page4.html">Menuitem 4</a></li>
</ul>

Note the position of class="activeSection" - this is what decides where the CSS is applied that changes the look of the selected page.

Arve Systad 2009-11-02 16:52:28

ansaurus

tags:

views:

answers:

How to change link's color when link is selected?

page1.html

page2.html

related questions