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 demo

<小时/> 已修改以添加边框，并将列表设置为水平“标签式”导航：

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;
}

Revised JS Fiddle demo

JQuery函数控制导航样式（每个导航选择不同的颜色）

1 个答案: