Question

我有这个HTML

  <div id="navContainer">
    <ul>
      <li class="selected"><a href="#">Home</a></li>
      <li><a href="#">Services</a></li>
    </ul>
  </div>

我想更改所选择的旁边的li的顶部边框（在本例中为“Services”）。我有这个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
});

我做错了吗？

提前致谢！

Answer 1

您是否尝试更改顶部边框或背景颜色？解决你的问题。

你的例子适合我。这是我的全部测试：

<!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>

第二个元素的背景颜色变为红色。

Answer 2

这适用于我，Services-LI的背景颜色更改为红色。

如果您想更改上边框，请替换

.css("background-color", "red");

与

.css("border-top","solid 1px red");

Answer 3

对我好，也许你的＆lt; a＆gt; link还定义了一个背景颜色，它覆盖了您在＆lt; li＆gt;上设置的背景颜色，这可能是您看不到任何内容的原因。

我建议您使用Firefox的Firebug扩展程序检查CSS样式。

jQuery在加载时更改属性

3 个答案: