Хрому не передается background через jquery
Есть простое меню.
<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 |
Решено. Проблема с кэшем хрома. Тему можно закрыть
|
Часовой пояс GMT +3, время: 09:08. |