Получить хочу меню. При наведении на кнопку меняет цвет. При нажатии на кнопку - нажатая кнопка меняет цвет на оранжевый, и остается такой, пока другую не нажму.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
.btnnavi
{
background-color:rgba(0,0,0,0.7);
height:90px;
width:15%;
color:white;
border-style:hidden;
border-bottom-left-radius:1px;/*for button transparency in opera*/
font-size:90%;
-webkit-transition-property:background-color, li;
-webkit-transition-duration: 1s, 1s;
-webkit-transition-timing-function: linear, ease-in;
-moz-transition-property:background-color, li;
-moz-transition-duration:1s;
-moz-transition-timing-function: linear, ease-in;
-o-transition-property:background-color, li;
-o-transition-duration:1s;
-o-transition-timing-function: linear, ease-in;
}
#btnnavi-l
{
border-bottom-left-radius:15px;
border-top-left-radius:15px;
}
#btnnavi-r
{
border-bottom-right-radius:15px;
border-top-right-radius:15px;
}
.btnnavi:hover,#btnnavi-l:hover,#btnnavi-r:hover
{
background-color:rgba(0,110,255,0.7);
}
.btnnavi:active,#btnnavi-l:active,#btnnavi-r:active
{
background-color:rgba(255,162,0,0.7);
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('.btnnavi').click(function()
{
$('.text').hide();
$('#page'+ $(this).attr("value")).fadeIn('slow');
$('.btnnavi').find(':active').toggleClass(':active');
$(this).toggleClass('active');
});
});
</script>
<div class="bodyTop">
<button class="btnnavi" id="btnnavi-l" value="1">Главная</button>
<button class="btnnavi" value="2">Порядок работы</button>
<button class="btnnavi" value="3">Стоимость услуги</button>
<button class="btnnavi" value="4">Контакты</button>
<button class="btnnavi" value="5">Документы</button>
<button class="btnnavi" id="btnnavi-r" value="6">Информация</button>
</div>
</body>
</html>
Вот так это выглядит. Не могу справиться с
$('.btnnavi').find(':active').toggleClass(':active ');
$(this).toggleClass('active');
Что-то не так делаю. Не остается она оранжевой после нажатия.