Keep link as active when I move arround page, till I select another link.

Question

Hi all, I have a problem with the links, I have created a menu made by links, which at the same time, indicates the user in what section he is. The menu works fine, but when I start doing things on the section under that link ( which it is pseudo-class active, as its been selected) then the link selected change to a normal link, therefore the user will lose orientation.

I don't think the code its necessary, but just in case anyone need it.

.menu
{
    width:100%;
    text-align:center; 



    }
.menu a
{
    height:30px;
    width:170px;
    background-image:url('../Images/item.png');
    background-repeat:no-repeat;
    background-position:center; 
    color:Black;
    font-weight: bold;
    font-family: Arial;
    font-size: 11px;
    text-decoration: none;
    cursor:pointer;
    word-spacing:-1px;
    border:none;
    padding:1px 0px 0px 0px;
    margin-top:1px;
    }

.menu a:hover
{
    background-image:url('../Images/itemHover.png');
    background-repeat:no-repeat;
    background-position:center;
    font-weight: bold;
    font-family: Arial;
    font-size: 11px;
    text-decoration: none;
    cursor:pointer;
    word-spacing:-1px;

    }
 .menu a:active
{
    background-image:url('../Images/itemActive.png');
    background-repeat:no-repeat;
    background-position:center;   
    color:White;
    font-weight: bold;
    font-family: Arial;
    font-size: 11px;
    text-decoration: none;
    cursor:pointer;
    word-spacing:-1px;
    text-decoration: none;
    }




            <div class="menu" >
              <a  href='vbscript:show(0)' id='focusme'>Section1</a>
              <a  href='vbscript:show(6)'> Section2 </a>
              <a  href='vbscript:show(2)'> Section3 </a>
              <a  href='vbscript:show(3)'> Section4 </a>
              <a  href='vbscript:show(4)'> Section5</a>
              <a  href='vbscript:show(5)'> Section6 </a>
              <a  href='vbscript:show(1)'> Section7</a>
              <a  href='vbscript:show(7)'> Section8 </a>
              <a  href='vbscript:show(8)'> Section9 </a>
              <a href="javascript:calllast24()"> Section10</a>
            </div>

Can anybody give me a hint on this?

Any help would be very much appreciated.

Thanks in advance.

Cesar.

Answer 1

Add a class name of something like "current" to the currently selected link using JavaScript when it is clicked.

You can recycle the "hover" class or make a unique one.

.menu a:active, .menu a.current
{
    background-image:url('../Images/itemActive.png');
    background-repeat:no-repeat;
    background-position:center;   
    color:White;
    font-weight: bold;
    font-family: Arial;
    font-size: 11px;
    text-decoration: none;
    cursor:pointer;
    word-spacing:-1px;
    text-decoration: none;
    }

Answer 2

Just define another class active together with a:active and add that class to the link in question dynamically (and remove the same class from any other links in the menu).

JavaScript / jQuery is perfectly applicable for this. E.g.

$('.menu a').click(function() {
    $('.menu a').removeClass('active');
    $(this).addClass('active');
}

Update: or if those links are actually synchronous and you're actually using a server-side view technology like PHP/JSP/ASP, then you'll need to grab its powers instead. Here's a JSP example:

<ul id="menu">
    <li><a href="foo" ${page == 'foo' ? 'class="active"' : ''}">foo</a></li>
    <li><a href="bar" ${page == 'bar' ? 'class="active"' : ''}">bar</a></li>
    <li><a href="boo" ${page == 'boo' ? 'class="active"' : ''}">boo</a></li>
</ul>

The above example only adds class="active" when the current page matches the link's href. You can do similar in PHP (that ternary operator). Not sure about ASP though.