根據點擊

Question

我有一個用於垂直視差頁一個獨特的全球導航以及靜態子頁面等

我想補充的活動狀態寫激活狀態的資產淨值。的border-bottom: 2px solid red;和padding-bottom: 26px;

我已經成功地將它們添加到下面的代碼點擊功能。雖然我覺得它有點笨重。

$(function(){ 
    $('.navbar-default .navbar-nav > li > a').click(function() { 
     $('.navbar-default .navbar-nav > li > a').css('text-decoration', 'none'); 
    $(this).css('border-bottom', '2px solid red'); 
    $(this).css('padding-bottom', '26px'); 
    }); 
}); 

問題：

後，我點擊一個導航項目，活動狀態出現，但後來我點擊其他項目，仍以前點擊之前的活動狀態顯示。一旦新的導航項被點擊，我需要刪除以前綁定的CSS或激活狀態。有什麼建議麼？

Answer 1

1. 而不是使用內嵌樣式（jQuery的.css()）的，做一個CSS類的風格
2. 使用jQuery的addClass()和removeClass() - 適當的選擇。

首先從全部中刪除它，然後將其添加到活動的一個。

Answer 2

這裏是 http://codepen.io/easingthemes/pen/gbgevd

內聯CSS（不推薦），用於改變類筆

$(function(){ 
    $('.navbar-default .navbar-nav > li > a').click(function() { 
     $('.navbar-default .navbar-nav > li > a').css({ 
      textDecoration: 'underline', 
      borderBottom: 'none', 
      paddingBottom: 'none' 
     }) 
     $(this).css({ 
      textDecoration: 'none', 
      borderBottom: '2px solid red', 
      paddingBottom: '26px' 
     }); 

    }); 
}); 

JS肘類（推薦）

$(function(){ 
    $('.navbar-default .navbar-nav > li > a').click(function() { 
     $('.navbar-default .navbar-nav > li > a').removeClass('.active'); 
     $(this).addClass('.active'); 
    }); 
}); 

CSS

.active { 
    text-decoration: none; 
    border-bottom: 2px solid red; 
    padding-bottom: 26px; 
}