Question

我正在为作业创建一个网站，我有一个使用有序列表创建的水平导航栏。每个列表项都是指向站点上另一个页面的链接，我正在尝试更改背景颜色以及列表项的文本颜色（单击时，活动时）。我知道使用CSS会更容易，我可以这样做，但我建议使用JQuery，这对我来说毫无用处。我怎样才能做到这一点？这就是我所拥有的：

HTML：

<ul class="nav">
   <li><a href="index.html">Home</a></li>
   <li><a href="history.html">History</a></li>
   <li><a href="roster.html">Roster</a></li>
   <li><a href="schedule.html">Schedule</a></li>
   <li><a href="documentation.html">Documentation</a></li>
</ul>

CSS：

.nav {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.nav li {
    display: inline;
}

.nav a {
    display: inline-block;
    padding: 10px;
    border: 1px #000000;
    border-radius: 2px;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    color: #FFFFFF;
    font-size: 23px;
    background-color: #000000;
}

Answer 1

这会让你开始，虽然你有点不清楚你想要实现的目标。

jsFiddle example

$('ul.nav > li').click(function(){
    $(this).children('a').toggleClass('active');
    $(this).siblings('li').children('a').removeClass('active');
});

在这个例子中，我只建议使用jQuery来实现点击功能。

As（@Nick M）指出，你应该使用CSS来完成剩下的工作。

修改..

我可能误解了你，我相信你只是在寻找:active伪类。

jsFiddle example

.nav a:active { /* style */ }

使用JQuery在单击时更改导航栏的CSS属性？

1 个答案: