Question

我正在创建一个网页，只是为了处理我的jquery，（我不会托管它或任何东西）我正在创建一个导航栏，并有一个问题。我希望导航栏border-bottomss为棕色，红色，橙色，黄色，然后是白色，而不是全部五个都是红色。这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script>
        $(document).ready(function() {

        });
        </script>
        <title>Fountain of Darkness</title>
        <style>
        body {
            background: #272733;
            font-family:'century gothic';
        } #main {
            width: 800px;
            margin: 0 auto;
        } #navbar ul {
            list-style-type:none;
            overflow:hidden;
        } #navbar li {
            float:left;
        } #navbar a {
            display:block;
            width:80px;
            height:40px;
            border-bottom:3px solid red;
            text-decoration:none;
            margin-right:10px;
            text-align:center;
        }
        </style>
    </head>
    <body>
    <div id="main">

        <div id="logo">
            Fountain of Darkness
        </div>
        <div id="navbar">
            <ul>
                <li><a href="index.hmtl">HOME</a></li>
                <li><a href="index.hmtl">ABOUT</a></li>
                <li><a href="index.hmtl">ARCHIVE</a></li>
                <li><a href="index.hmtl">GALLERY</a></li>
                <li><a href="index.hmtl">NEWS</a></li>
            </ul>
        </div>
        <div id="content">
            Text
        </div>
    </div>
    </body>
</html>

无论如何使用我的代码执行此操作？谢谢！

编辑：我没有要求jquery答案！这只是一些关于原因的额外信息。

Answer 1

您可以使用css3：nth-child（）选择器。

#navbar li:nth-child(1) a {
    border-bottom:3px solid red;
}
#navbar li:nth-child(2) a {
    border-bottom:3px solid blue;
}
...

http://jsfiddle.net/hDhQB/

你能使用它吗？ http://caniuse.com/#search=nth-child

Answer 2

因为它只是为了学习而且你要求一个jQuery解决方案，这样的东西会起作用：

$(document).ready(function () {
    var colors = ['brown', 'red', 'orange', 'yellow', 'white'];
    $('#navbar a').css('border-bottom-color', function(i) {
        return colors[i];
    });
});

FIDDLE

最好在生产网站上使用CSS。

Answer 3

使用jQuery执行此操作是错误的。你是静态地询问造型元素，而不是动态。这是你可以用普通的CSS类做的事情。

.white {
   border-color: white;
}
.blue {
   border-color: blue;
}
// ecc...

然后

<li class="white"><a href="index.hmtl">HOME</a></li>
<li class="blue"><a href="index.hmtl">ABOUT</a></li>
// ecc...

您现在拥有CSS类white和blue，您可以在项目的任何位置重复使用它们。或者，您可以将其命名为home_color和about_color。但这取决于您网页的架构。这些方法都不需要单行JavaScript / jQuery。

Answer 4

您可以为每个链接指定一个不同的类并对其进行适当的设置。

<li><a class = "brown" href="index.hmtl">HOME</a></li>
<li><a class = "red" href="index.hmtl">ABOUT</a></li>
<li><a class = "orange" href="index.hmtl">ARCHIVE</a></li>
<li><a class = "yellow" href="index.hmtl">GALLERY</a></li>
<li><a class = "white" href="index.hmtl">NEWS</a></li>

#navbar a.brown {
    border-color:brown;
}

#navbar a.red {
    border-color:red;
}

#navbar a.orange {
    border-color:orange;
}

#navbar a.yellow {
    border-color:yellow;
}

#navbar a.white {
    border-color:white;
}

如何制作边框底部不同颜色的不同部分？

4 个答案: