javascript - Web 菜单按钮保持不同的颜色

Question

我可能不知道如何搜索这个确切的问题，而且我还没有找到任何东西，所以很抱歉，如果已经有人问过。

我只有 3 个按钮，索引是“Inicio”页面。我已经将 :hover 应用于按钮，但我想将其固定在显示页面的按钮上。显然，我希望“Inicio”一开始就是这种状态。

(下面的 jsfiddle)

<!-- menu -->
        <nav id="nav">
            <ul>
                <a id=inicio href=#><li class="boton"><p class="text_menu">INICIO</p></li></a>
                <a id=productos href=#><li class="boton"><p class="text_menu">PRODUCTOS</p></li></a>
                <a id=contacto href=#><li class="boton"><p class="text_menu">CONTACTO</p></li></a>
            </ul>
        </nav>

#nav {
    padding-top: 27px;
    padding-left: 25%;
}

#nav ul li {
    list-style:none;
    display:inline-block;
    margin-left: 4%;

    text-align: center;
    font-family: 'Dosis', sans-serif;
    font-size: 100%;
    color: #FFF;
}

.text_menu {
    padding-top: 5px;
}

.boton {

    width: 15%;
    height: 57px;

    background-color: #0099ff;
    border-radius: 10px 10px 0px 0px;
    -moz-border-radius: 10px 10px 0px 0px;
    -webkit-border-radius: 10px 10px 0px 0px;
    border: 0px solid #000000;

}

.boton:hover {
    background-color: #0033ff;
}

这是一个 jsfiddle: http://jsfiddle.net/7jbUj/

感谢您的回复。

Answer 1

你可以简单地将像 .hovered 这样的类添加到像

这样的当前按钮

HTML:

<li class="boton hovered"><p class="text_menu">CONTACTO</p></li></a>

CSS:

.hovered {
   background-color: #0033ff;
}

更新:Fiddle

UPD2:用于换页

您可以简单地通过“点击”来添加和删除类，例如:

$('nav ul a').on('click', function(){
    $('nav ul a li.hovered').removeClass('hovered');
    $(this).children('li').addClass('hovered');
})

Fiddle2