Кнопка веб-меню для сохранения другого цвета

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

U можно просто добавить класс как .hovered для текущей кнопки как

HTML:

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

CSS:

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

UPD: Fiddle

UPD2: Для страницы меняющегося

U можно просто добавлять и удалять класс по прозвучать щелчок, как:

$('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; 
} 

Fiddle: http://jsfiddle.net/rajaveld/t31zc8jx/