Есть простое меню.
<div class="main_menu">
<ul class="catalog_list">
<li class="qq"><a id="topmenu129" href="/vyzov-zamerschika.html">Вызов замерщика</a></li>
<li class="qq"><a id="topmenu130" href="/kupon-na-skidku.html">Купон на скидку</a></li>
<li class="qq"><a id="topmenu131" href="/price.html">Услуги</a></li>
<li class="qq"><a id="topmenu132" href="/calc.html">Калькулятор</a></li>
<li class="qq"><a id="topmenu133" href="/#">Видео</a></li>
<li class="qq"><a id="topmenu134" href="/discount.html">Акция!</a></li>
</ul>
</div>
Есть css для этого меню:
.main_menu {
clear: both;
width: 100%;
height: 109px;
}
.catalog_list {
padding: 0;
margin: 0;
}
.catalog_list a {
float: left;
width: 100%;
height: 20px;
font: bold 14px arial;
padding-top: 80px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
}
#topmenu129 {
background: url(../i/icon_call.gif) no-repeat 50% 20%;
color: #FFBE00;
}
#topmenu130 {
background: url(../i/icon_question.gif) no-repeat 50% 20%;
color: #68A3FF;
}
#topmenu131 {
background: url(../i/dollar.png) no-repeat 50% 20%;
color: #FFBE00;
}
#topmenu132 {
background: url(../i/accessories-calculator.png) no-repeat 50% 20%;
color: #68A3FF;
}
#topmenu133 {
background: url(../i/xine.png) no-repeat 50% 20%;
color: #FFBE00;
}
#topmenu134 {
background: url(../i/icon_discount.gif) no-repeat 50% 20%;
color: #42B700;
}
.catalog_list li.qq {
height: 110px;
background: url(../i/menu1.gif) no-repeat left top;
background-size: 100% 110px;
float: left;
list-style-type: none;
text-align: center;
width: 16.6%;
}
#topmenu129:hover, .current #topmenu129 {
background: url(../i/remont_red.png) no-repeat 50% 0;
}
#topmenu130:hover, .current #topmenu130 {
background: url(../i/kupon.png) no-repeat 50% 0;
}
#topmenu131:hover, .current #topmenu131 {
background: url(../i/ceny.png) no-repeat 50% 0;
}
#topmenu132:hover, .current #topmenu132 {
background: url(../i/calc.png) no-repeat 50% 0;
}
#topmenu133:hover, .current #topmenu133 {
background: url(../i/video.png) no-repeat 50% 0;
}
#topmenu134:hover, .current #topmenu134 {
background: url(../i/akciya.png) no-repeat 50% 0;
}
.catalog_list a span{font:bold 14px arial;text-transform: uppercase;}
.catalog_list a:hover{float:left;color:#ed2225}
.catalog_list a .red_img{display:none}
.catalog_list a:hover .red_img{display:inline}
.catalog_list a:hover .grey_img{display:none}
.catalog_list li li{background: none repeat scroll 0 0 transparent;float: none;}
.last_img{display:none}
.catalog_list li.current{
height: 110px;
background: url("../i/menu2.gif");
background-position: left top;
background-repeat: no-repeat;
background-size: 100% 110px;
float: left;
list-style-type: none;
text-align: center;
width: 16.6%;
}
.catalog_list li.current a{color:#ed2225;}
.catalog_list li.current .last_img{display:inline}
.catalog_list li.current .grey_img,.catalog_list li.current .red_img{display:none}
a {
color:#0072ff;
font:12px Verdana, Arial, Tahoma, Helvetica;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
И код на jqyery, который производит смену классов у пунктов li
$(document).ready(function(){
$('.catalog_list li a').each(function () {
if (this.href== location.href){
$(this).parent().removeClass('qq');
$(this).parent().addClass('current');
}
});
});
При этом при нажатии на ссылку меню у каждого li должен меняться класс с qq на current, что и происходит. Однако во всех браузерах при смене класса у li меняется background, а у Хрома картинка просто пропадает. Еще и подтормаживает все это дело.
Подскажите, пожалуйста, как правильно реализовать смену классов, чтобы все работало верно. Есть подозрения, что я вообще подхожу к вопросу не с той стороны...
Спасибо!
P.S. Работу меню можно посмотреть на сайте
http://www.oknario.ru
