Функция JQuery для управления стилями навигации (каждая навигация выделяет свой цвет)

Question

Я пытаюсь объединить функцию в JQuery, которая добавляет уникальные цвета для каждой навигационной опции.Теоретически, я думаю, что мне следует создать массив и выполнить, возможно, функцию «каждый», но я продолжаю зацикливаться на том, чтобы вернуться к долгому способу использования JQuery в этом случае.

Вот код;

<div id="navigation-container">
<ul class="float-left">
                <li><a href="#" title="Home">Home</a></li>
                <li><a href="#" title="Innovation">Innovation</a></li>
                <li><a href="#" title="Our company">Our company</a></li>
                <li><a href="#" title="What we do">What we do</a></li>
                <li><a href="#" title="Community">Community</a></li>
                <li><a href="#" title="Newsroom">Newsroom</a></li>
                <li><a href="#" title="Careers">Careers</a></li>
           </ul>
</div>

А вот сценарий, который мне нужно сжать;

$('#navigation-container ul li:nth-child(1)').mouseover(function(){
                    $(this).children().css({'background':'#da032c'});
                    $(this).parent().css({'border-bottom':'2px solid #da032c'});
    });
    $('#navigation-container ul li:nth-child(2)').mouseover(function(){
                    $(this).children().css({'background':'#0093d0'});
                    $(this).parent().css({'border-bottom':'2px solid #0093d0'});
    });
    $('#navigation-container ul li:nth-child(3)').mouseover(function(){
                    $(this).children().css({'background':'#000f47'});
                    $(this).parent().css({'border-bottom':'2px solid #000f47'});
    });
    $('#navigation-container ul li:nth-child(4)').mouseover(function(){
                    $(this).children().css({'background':'#000f47'});
                    $(this).parent().css({'border-bottom':'2px solid #000f47'});
    });
    $('#navigation-container ul li:nth-child(5)').mouseover(function(){
                    $(this).children().css({'background':'#6d1f7e'});
                    $(this).parent().css({'border-bottom':'2px solid #6d1f7e'});
    });
    $('#navigation-container ul li:nth-child(6)').mouseover(function(){
                    $(this).children().css({'background':'#b2aa7e'});
                    $(this).parent().css({'border-bottom':'2px solid #b2aa7e'});
    });
    $('#navigation-container ul li:nth-child(7)').mouseover(function(){
                    $(this).children().css({'background':'#231f20'});
                    $(this).parent().css({'border-bottom':'2px solid #231f20'});
    });
    $('#navigation-container ul li').mouseout(function(){
                    $(this).children().attr({'style':''});
                    $(this).parent().attr({'style':''});
    });

Причина, по которой я должен сделать это так, заключается в том, что CMS, из которой исходит контент, не 'Я не могу применить класс к каждому отдельному файлу "li", поэтому мне нужно использовать JQuery для достижения этой цели.Любая помощь будет принята с благодарностью!

Дези

Answer 1

Вы можете попробовать что-то вроде:

var colors = ['red','blue','green','yellow','silver','orange','aqua'];
var defaultColor = $('#navigation-container li').eq(0).css('background-color');

$('#navigation-container li').hover(
    function(){
        var thisIndex = $(this).index();
        $(this).css('background-color',colors[thisIndex]);
    },
    function(){
        $(this).css('background-color',defaultColor);
    });

Демонстрация JS Fiddle .

Отредактировано для добавления границ, а также для стилизации списка как горизонтальной навигации в стиле табуляции:

var colors = ['red','blue','green','yellow','silver','orange','aqua'];
var defaultColor = $('#navigation-container li').eq(0).css('background-color');

$('#navigation-container li').hover(
    function(){
        var thisIndex = $(this).index();
        $(this).css('background-color',colors[thisIndex]);
        $(this).parent().css('border-bottom-color',colors[thisIndex]);
    },
    function(){
        $(this).css('background-color',defaultColor);
        $(this).parent().css('border-bottom-color',defaultColor);
    });

CSS:

#navigation-container ul {
    border-bottom: 2px solid #fff;
    overflow: hidden;
}

#navigation-container ul li {
    float: left;
    padding: 0 1em 0 0;
    text-indent: 0.5em;
}

Пересмотренная демонстрация JS Fiddle .