У меня есть этот HTML
<div id="navContainer"> <ul> <li class="selected"><a href="#">Home</a></li> <li><a href="#">Services</a></li> </ul> </div>
И я хочу изменить верхнюю границу li рядом с выбранной (в данном случае «Услуги»). У меня есть этот JQuery, но он не работает.
$(document).ready(function(){ alert($("#navContainer .selected").next().html()); // This alerts: <a href="#">Services</a> $("#navContainer .selected").next().css("border-top-color","#7d7d7d"); // This doesn't do anything });
Я что-то не так делаю?
Заранее спасибо!
Это работает для меня, цвет фона LI Services изменен на красный.
Если вы хотите изменить верхнюю границу, замените
.css("background-color", "red");
с
.css("border-top","solid 1px red");
Выглядит нормально для меня, возможно, ваша ссылка также определяет цвет фона, который покрывает тот, который вы установили на , возможно, поэтому вы ничего не видите.
Я предлагаю вам проверить стили CSS с помощью расширений Firebug для Firefox.
Вы пытаетесь изменить верхнюю границу или цвет фона? Исправьте свой вопрос.
Ваш пример работает на меня. Вот мой полный тест:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <script type="text/javascript" src="jquery-1.3.1.js"></script> <script> $(document).ready(function(){ alert($("#navContainer .selected").next().html()); // This alerts: <a href="#">Services</a> $("#navContainer .selected").next().css("background-color","red"); }); </script> </head> <body> <div id="navContainer"> <ul> <li class="selected"><a href="#">Home</a></li> <li><a href="#">Services</a></li> </ul> </div> </body> </html>
Цвет фона второго элемента становится красным.