css - HTML、CSS、菜单保持突出显示

Question

我希望我的菜单在我按下它时保持突出显示。我怎么能那样做？我只是一个初学者 html 和 CSS 程序员，我不知道我该怎么做，我试过其他人所说的，没有用.....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%;
}

我不知道怎么做，请帮忙。抱歉，我来自斯洛文尼亚，英语不好。

Answer 1

这就是你要找的http://jsfiddle.net/rYAGY/5/

如果是，请将此 jQuery 代码添加到页面底部

    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');
        }
    });