使用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示例

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

在這種情況下，我只建議對單擊功能使用jQuery。

正如（@Nick M）指出的那樣，其余部分應使用CSS。

---

編輯..

我可能誤會了您，我相信您只是在尋找:active偽類。

jsFiddle示例

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