如何使用JavaScript更改菜单颜色

Question

我试图通过向其中添加一些效果来使静态副菜单更加动态。

从下面的代码中，我希望“第一个标题”和“第二个标题”与它们的嵌套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>

我看过论坛，虽然这个（）似乎与我的要求类似，但是我对js / jquery的全面了解确实妨碍了我。

任何指导将不胜感激

：：编辑：：

这个（）可能接近我要寻找的内容（它比上一个链接中的示例要简单一些），但是并不能完全满足我的需要。 因此，仍然欢迎任何帮助。

Answer 1

您可以只使用CSS：

ul.sideNav li a {
  color: red;
}

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

Answer 2

如果要更改某些颜色，则应使用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（），并且可以使用多种不同的条件。 我强烈建议您在W3Schools上阅读HTML，DOM，CSS和JavaScript，他们为您提供了很多不错的指南。

Answer 3

请注意，这不是问题的直接答案，但我认为这对OP以及希望其他人很有用

我绝对同意，在您的情况下，您可以最简单地使用css来设置元素的样式（请参阅@lennart的子选择示例），当您在应用样式时需要更加动态时，可能会出现一些情况，您当然可以使用jquery的.css()和类似函数，也许确实使用普通的旧javascript，但是这通常会导致dom遍历，即使使用jquery也会很麻烦，第二个选择是动态添加样式表，这也可能非常有效，第三个选择将是更改/操作<style>标签，例如，您可能在一些json数据中定义了样式，在其中我们可以有点创意并构建一串CSS并将其添加到<style>

// turn #accordion into a simple accordion menu
// adds style to the head from json data
$(document).ready(function() {

  // hide <ul> nested in accordion
  $('#accordion').find('ul').hide();

  // add click event to accordion .heading
  $('#accordion').find('.heading').click(function(e) {
    // do not follow anchor    
    e.preventDefault();      
    // slide up any open sections
    if(!($(this).hasClass('open'))) {
      $('.open').removeClass('open').next().slideUp();
    }
    $(this).addClass('open').next().slideToggle();
  });

  // a function that parses json and
  // appends it to <style>
  function addStyleFromJson(json) {
    // turn json into normal string
    var style = JSON.stringify(json);
    // remove apostrophes, colons before {, opening and closing {}
    style = style.replace(/(")|(:(?=\{))|(^\{)|(\}$)/g, '');
    // remove commas after }
    style = style.replace(/(\}|\;),/g, function($0, $1){
    return $1 ? $1 + '' : $0;
    });
    // prepend this style with any style declared in <head>
    style = $('style').text() + style;
    // append style element to head
    $('style').text(style);  
  }

  // load some style
  $.ajax({
    url: 'http://dl.dropbox.com/u/47426368/somejson.js',
    dataType: 'jsonp',
    jsonp: false,
    jsonpCallback: 'myCallback',
    cache: true,
    success: addStyleFromJson
  });
});

在此演示中，我们将html转换为手风琴样式菜单，然后从远程位置加载一些json并将其解析为<style>标记（假定它已经存在）。 正如我之前所说的，这可能不是最好的选择，因此有很多选择，因此，正如我在评论中说的那样，您必须真正学习这些东西才能使用它，这与骑自行车或做数学没什么两样。魔术（努力）和奉献:-)，我希望这能说明您如何相对简单地使用多种技术来动态地创建一些东西，我认为这是javascript出现的原因之一

这是一个演示

如何使用JavaScript更改菜单颜色

问题描述

3 个解决方案

解决方案1
3 2012-02-09 14:04:01

解决方案2
0 2012-02-09 14:06:33

解决方案3
0 2012-02-09 16:20:34

如何使用JavaScript更改菜单颜色

问题描述

3 个解决方案

解决方案1 3 2012-02-09 14:04:01

解决方案2 0 2012-02-09 14:06:33

解决方案3 0 2012-02-09 16:20:34

解决方案1
3 2012-02-09 14:04:01

解决方案2
0 2012-02-09 14:06:33

解决方案3
0 2012-02-09 16:20:34