Приветствую уважаемое сообщество. Сам я совсем еще чайник, но учусь
Делаю меню для сайта. Это горизонтальный ряд кнопок, которые при :hover медленно изменяют цвет, а при нажатии меняют цвет на оранжевый, пока не будет нажата другая кнопка. Весь текст в Div'ах, которые при нажатии отображаются, в зависимости от нажатой кнопки.
Проблема в том, что если всю функцию целиком засунуть в <button onclick=****> все работает отлично. Но это куча лишнего кода на странице. Из отдельного файла это работать не хочет. Догадываюсь, что это из-за $(this).css('background-color','rgba(255,162,0,0.7)');
Вся проблема, похоже, в (this). Если при вызове из onclick, скрипт понимает, что (this) это та кнопка, которая нажата, то скрипт в файле этого не понимает. На что поменять (this) ? Как передать в скрипт информацию, какая кнопка нажата ?
<style>
.btnnavi
{
background-color:rgba(0,0,0,0.7);
height:90px;
width:15%;
color:white;
border-style:hidden;
border-bottom-left-radius:1px;/*без этого в опере нет прозрачности, почему-то*/
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);
}
</style>
<div>
<button class="btnnavi" id="btnnavi-l" onclick="$(navigate('page1'));">Пункт 1</button>
<button class="btnnavi" onclick="$(navigate('page2'));">Пункт 2</button>
<button class="btnnavi" id="btnnavi-r"onclick="$(navigate('page3'));">Пункт 3</button>
</div>
function navigate(page) {
$('.text').hide(); /*скрываем открытый div*/
$('#' + page).fadeIn('slow'); /*показываем другой div*/
$('.btnnavi').css('background-color','rgba(0,0,0,0.7)'); /*сбрасываем цвет нажатой кнопки*/
$(this).css('background-color','rgba(255,162,0,0.7)');/*устанавливаем цвет нажатой кнопки*/
}