HTML，CSS，菜单保持突出显示

Question

I want my menu to stay highlighted when I press on it. How could I do that? I am only a begginer html and CSS programer and I don't know how could I do this, I tried as others have said, didn't work..... HTML:

    <div id="menu">
        <ul>
            <li><a href="index.html">Domov</a></li>
            <li><a href="CarbonGaming.html">Igre</a></li>
            <li><a href="#">Robotika</a></li>
            <li><a href="About.html">O nas</a></li>
            <li><a href="SMcontact.html">Kontakt</a></li>
            <li><a href="#">Forum</a></li>


</ul>
</div>

CSS:

#menu {
    width: 950px;
    height: 60px;
    margin: 0 auto;
    background: #6AA2FD url(images/img04.gif);
}

#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#menu li {
    display: inline;
    text-transform: uppercase;
}

#menu a {
    display: block;
    float: left;
    background: url(images/img15.gif) no-repeat right 100%;
    padding: 18px 30px 0 30px;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    font-weight: bold;
    color: #FFFFFF;
}

#menu a:hover {
    height: 60px;
    background: url(images/img16.gif) repeat-x right 30%;
    color: #000000;
}

#menu .current_page_item {

}

#menu .current_page_item a {
    color: #FFFFFF;
        background: url(images/img16.gif) repeat-x right 30%;
}

I don't know how to make that, pls help. And sorry for bad English i'm from Slovenia.

Answer 1

Is this what you are looking for http://jsfiddle.net/rYAGY/5/

If yes, please add this jQuery code to your bottom of page

    var elements = $('#nav li a');
    elements.on('click', function(e){
        debugger;
        e.preventDefault();
        var th = $(this);
        if(!th.hasClass('selected')){  
            elements.removeClass('selected');
            th.addClass('selected');
        }
    });