jquery - 使用 JQuery 更改导航栏的 CSS 属性？

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 用于点击功能。

正如 (@Nick M) 指出的那样，其余的你应该使用 CSS。

---

编辑..

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

jsFiddle example

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