Question

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

我只有3个按钮，索引是“Inicio”页面。我已经应用了：将鼠标悬停在按钮上，但是我想为显示页面的按钮保持固定。显然，我希望在开始时能在这种状态下使用“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;
}

UPD：Fiddle

UPD2：用于更改页面

你可以在“点击”上添加和删除类，如：

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

Fiddle2

Answer 2

如果你想在没有JQuery的情况下使用，你必须在javascript中使用它

HTML：

<a id="mnu1" class="mnu hovered" src="#" onclick="makeSelected('mnu1')"> One </a>
<a id="mnu2" class="mnu" src="#" onclick="makeSelected('mnu2')"> Two </a>
<a id="mnu3" class="mnu" src="#" onclick="makeSelected('mnu3')"> Three </a>

CSS：

.mnu{
  background-color : #451;
  margin-left:20px;
  font-size:30px;
}
a:hover{
  background-color:#ccc;
}
.hovered{
  background-color:#ccc;
}

JS：

var prev_mnuid= "mnu1";
function makeSelected(mnuid){
  document.getElementById(prev_mnuid).className = "mnu";
  document.getElementById(mnuid).className = "mnu hovered";
  prev_mnuid=mnuid;
}

小提琴：http://jsfiddle.net/rajaveld/t31zc8jx/

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

2 个答案: