如何使用javascript更改菜单颜色

我试图通过添加一些效果使静态侧菜单更具动态性

从下面的代码中，我希望“第一个标题”和“第二个标题”与嵌套的li不同。我希望有一个背景颜色和一个特定的文本（说红色），这些风格是永久性的。另一方面，嵌套的li（A1-B3）应该没有背景，如果没有激活，文本应该从灰色变为绿色，如果选择链接

<ul class="sideNav">
<li class="first active"><a>First Heading</a>
<ul>
<li class="first"><a>A1</a></li>
<li><a>A2</a></li>
<li class="last"><a>A3</a></li>
</ul>
</li>   
<li class="last active"><a>Second Heading</a>
<ul>
<li class="first"><a>B1</a></li>
<li><a>B2</a></li>
<li class="last"><a>B3</a></li>
</ul> 
</li>
</ul>

第一个标题

A1
A2
A3


第二个标题

B1
B2
B3

我已经在论坛上看过了，虽然这个（）似乎与我的要求相似，但我对js/jquery知识的完全缺乏确实阻碍了我

如有任何指导，将不胜感激

：：编辑：：

这个（）可能接近于我想要的（它没有上一个链接中的示例那么复杂），但它并不完全符合我的需要。因此，我们仍然欢迎任何帮助。

您可以使用CSS：

ul.sideNav li a {
  color: red;
}

ul.sideNav li ul li a {
  color: grey;
}

您只需使用CSS即可：

ul.sideNav li a {
  color: red;
}

ul.sideNav li ul li a {
  color: grey;
}

---

如果你想改变某些东西的颜色，你应该真正使用CSS条件。例如，如果我希望我的列表项在鼠标悬停时为x颜色，在单击时为y颜色默认值，在单击时为z颜色。。。我的CSS如下所示：

ul.sideNav:link,li.sideNav:link
{
color:y;
}
ul.sideNav:active,ul.sideNav:visited,li.sideNav:visited,li.sideNav:active
{
color:z;
}
ul.sideNav:hover,li.sideNave:hover
{
color:x;
}

您可以将这些应用于任何标记，例如anchor（），并且可以使用各种不同的条件。

---

我强烈建议您在上阅读HTML、DOM、CSS和JavaScript，它们有很多很好的指南可以帮助您进行操作。

如果您想更改某些内容的颜色，您应该真正使用CSS条件。例如，如果我希望我的列表项在鼠标悬停时为x颜色，在单击时为y颜色默认值，在单击时为z颜色。。。我的CSS如下所示：

ul.sideNav:link,li.sideNav:link
{
color:y;
}
ul.sideNav:active,ul.sideNav:visited,li.sideNav:visited,li.sideNav:active
{
color:z;
}
ul.sideNav:hover,li.sideNave:hover
{
color:x;
}

您可以将这些应用于任何标记，例如anchor（），并且可以使用各种不同的条件。 我强烈建议您在网站上阅读HTML、DOM、CSS和JavaScript，他们有很多很好的指南帮助您学习。

请注意，这不是对问题的直接回答，但我觉得这对OP和其他人都很有用

虽然我非常肯定，在您的情况下，您可以最简单地使用css来设置元素的样式（请参阅@lennart的答案，例如子选择），但在应用样式时可能需要更具动态性，您当然可以使用jquery的

.css（）

和类似函数，也许确实使用普通的老javascript，但是这通常会导致dom遍历，即使使用jquery也可以轻松地进行，第二个选项是动态添加样式表，这也非常有效，第三个选项是更改/操作

标记，例如，您可能在一些json数据中定义了样式，在这些数据中，我们可以有点创造性地构建一个css字符串，并将其添加到

//将#手风琴变成一个简单的手风琴菜单
//从json数据向头部添加样式
$（文档）.ready（函数（）{
//隐藏嵌套在手风琴中的

$（'#accordion'）。查找（'ul'）。隐藏（）；
//将单击事件添加到accordion.heading
$（“#手风琴”）。查找（“.标题”）。单击（函数（e）{
//不要随波逐流
e、 预防默认值（）；
//向上滑动任何打开的部分
if（！（$（this）.hasClass（'open'））{
$（'.open'）.removeClass（'open'）.next（）.slideUp（）；
}
$（this.addClass（'open'）.next（）.slideToggle（）；
});
//解析json和json的函数
//附加到
函数addStyleFromJson（json）{
//将json转换为普通字符串
var style=JSON.stringify（JSON）；
//删除{前面的撇号、冒号、打开和关闭{}
style=style.replace（/（“”）|（：（？=\{））|（^\{）|（\}$）/g'；
//删除}后面的逗号
style=style.replace（/（\}\\），/g，函数（$0，$1）{
返回$1？$1+“”：$0；
});
//使用中声明的任何样式作为此样式的前缀
style=$（'style'）.text（）+style；
//将样式元素附加到头部
$（“样式”）。文本（样式）；
}
//加载一些样式
$.ajax({
网址：'http://dl.dropbox.com/u/47426368/somejson.js',
数据类型：“jsonp”，
jsonp:false，
jsonpCallback:“myCallback”，
是的，
成功：addStyleFromJson
});
});

在本演示中，我们将html转换为手风琴式菜单，然后从远程位置加载一些json，并将其解析为

标记（假定它已经存在）.正如我之前所说，这可能不是最好的选择，而且有很多选择，所以正如我在评论中所说的，你必须真正学习这些东西才能使用它，这与骑自行车或做数学没有什么不同，没有魔法只是（难）工作和奉献：-），我希望这展示了如何相对简单地使用几种技术来创建更具动态性的东西，我认为这是javascript产生的原因之一

这是一个

请注意，这不是对这个问题的直接回答，但我觉得它对OP和其他人都很有用

虽然我非常赞同，在您的情况下，您可以最简单地使用css来设置元素的样式（请参阅@lennart的答案，例如子选择），但在应用样式时可能需要更具动态性，您当然可以使用jquery的

.css（）

和类似的函数，可能确实使用普通的旧javascript，但是这通常会导致dom遍历，即使使用jquery也可以轻松地进行，第二个选项是动态添加样式表，这也是非常有效的，第三个选项是更改/操作

标记，例如，您可以使用样式定义我们可以在一些json数据中添加一点创意，构建一个css字符串，并将其添加到

<