CSS添加類到選定的元素

Question

我正在使用twitter bootstrap並撰寫標題，我有一個像這樣的標題

  <ul class="nav navbar-nav">
    <li><a href="#" class="active" onclick="$(this).addClass('active')">Home</a></li>
    <li class="currentselection"><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>

結果看起來像這樣：

LIVE版本可以在這里看到：

主頁| 關於| 聯系-現場演示

問題是，我只想設置一個有效的<a>樣式，因此，如果用戶單擊“關於”，則<a class="active">About</a>樣式將被設置為有效，而<a>Home</a>將不再標記為活動狀態。 這看起來很常見，應該很容易實現，但是我已經花了2天的時間，並且真的不知道，並且來自C和CPP背景，我的Java語言能力很弱...您能解釋一下並標記一下文件（.css或.js或.html本身）可以實現此目的？

非常感謝您的幫助！

Answer 1

您已經用twitter-bootstrap標記了它，這是否意味着您正在運行jQuery？ 如果是這樣，那么這很容易解決。

您只需像這樣設置CSS：

.nav li a { color: #000; background: #FFF; }
.nav li a.active { color: #FFF; background: #FF0000 }

然后，您可以通過在腳本中的某個位置放置jQuery偵聽器來更改元素上的“活動”類。 在這種情況下，您正在聽某人單擊它：

$(function() {
   $('ul.nav li a').on('click', function(e) {

       //this line prevents the link for actually redirecting you
       e.preventDefault(); 

       //this line clears whatever the previous active link was
       $(this).closest('ul').find('li a.active').removeClass('active');

       //this line adds the class to the current link
       $(this).addClass('active');

   });
});