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

时间:2013-11-25 06:49:35

标签: css html menu href

当我按下它时,我希望我的菜单保持突出显示。我怎么能这样做?我只是一个初学者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%;
}

我不知道怎么做,请帮忙。对不起英语不好我来自斯洛文尼亚。

1 个答案:

答案 0 :(得分:0)

这是您正在寻找的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');
        }
    });