Как изменить цвет меню с помощью javascript

Question

Я пытаюсь сделать статическое боковое меню немного более динамичным, добавив к нему некоторые эффекты.

Из приведенного ниже кода я хочу, чтобы «First Heading» и «Second Heading» отличались от их вложенных ликов. Я ищу цвет фона и определенный текст (например, красный), и эти стили должны быть постоянными. С другой стороны, вложенные 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 знание действительно сдерживает меня.

Любое руководство будет оценено

:: Edit ::

Это() может закрыть на то, что я ищу (это менее сложным, чем, например, в предыдущей ссылке), но это Безразлично» Мне нужно все, что мне нужно. Поэтому любая помощь все равно будет приветствоваться.

Answer 1

Вы можете просто использовать CSS:

ul.sideNav li a { 
    color: red; 
} 

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

Answer 2

Если вы хотите, чтобы изменить цвета некоторых вещей, вы должны использовать CSS условными на самом деле. Например, если я хочу, чтобы мои элементы списка, чтобы быть х цветом при наведении мышки, у цвета по умолчанию, и г цвета при нажатии ... мой 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 по адресу W3Schools, у них есть много хороших руководств, которые помогут вам начать работу.

Answer 3

Пожалуйста, обратите внимание, что это не прямой ответ на вопрос, но я чувствую, что это было бы полезно для ОП и, надеюсь, другие

Хотя я определенно aggree, что в вашем случае вы можете проще всего использовать 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

вот demo