如何在用戶點擊jQuery時在特定的「li」上添加類（活動）

Question

我有一個菜單，其中包含某些項目，我希望當用戶點擊任何li時，只有它的類成爲活動類。我有一個菜單項目，如下列：

<ul class="nav"> 
         <li class="dropdown active"> 
          <asp:HyperLink ID="hlHome" runat="server" href="Default.aspx">Home</asp:HyperLink> 
         </li> 
         <li class="dropdown"> 
          <asp:HyperLink runat="Server" cssClass="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#"> 
           Register 
           <i class="icon-angle-down"></i> 
          </asp:HyperLink> 
          <ul class="dropdown-menu"> 
           <li><asp:HyperLink runat="server" ID="hlCreateAccount" href="register.aspx">Create Account</asp:HyperLink></li> 
           <li><asp:HyperLink runat="Server" href="forgot.aspx" ID="hlForgot">Forgot Credentials ?</asp:HyperLink></li> 
           <li><asp:HyperLink runat="server" href="blocked.aspx" ID="hlBlockedAccount">Blocked Account</asp:HyperLink></li> 
           <li><asp:HyperLink ID="hlUnblockAccount" href="unblock.aspx" runat="server">Unblock Account</asp:HyperLink></li> 
          </ul> 
         </li> 
         <li><asp:HyperLink ID="hlBug" runat="server" href="bug.aspx">Report A Bug</asp:HyperLink></li> 
         <li><asp:HyperLink ID="hlContact" runat="server" href="contact.aspx">Contact Us</asp:HyperLink></li> 
        </ul> 

我試圖用jQuery下面的代碼：

<script type="text/javascript"> 
    function pageLoad() { 
     var loc = window.location.href.split('/'); 
     var page = loc[loc.length - 1]; 
     $('ul.nav a').each(function (i) { 
      var href = $(this).attr('href'); 
      if (href.indexOf(page) !== -1) { 
       $('ul.nav li.active').removeClass('active'); 
       $(this).parent().addClass('active'); 
      } 
     }); 
    } 

它不與下拉菜單中工作時的工作完善的與所有其他沒有下拉項目的菜單。如何使用具有項目下拉列表的菜單項更改其工作的代碼。我也在我的頁面中使用更新面板。

Answer 1

你在標籤中同時指定了jQuery和Javascript，所以這裏有兩種方法。

jQuery的

var selector = '.nav li'; 

$(selector).on('click', function(){ 
    $(selector).removeClass('active'); 
    $(this).addClass('active'); 
}); 

小提琴：http://jsfiddle.net/bvf9u/

---

純JavaScript：

var selector, elems, makeActive; 

selector = '.nav li'; 

elems = document.querySelectorAll(selector); 

makeActive = function() { 
    for (var i = 0; i < elems.length; i++) 
     elems[i].classList.remove('active'); 

    this.classList.add('active'); 
}; 

for (var i = 0; i < elems.length; i++) 
    elems[i].addEventListener('mousedown', makeActive); 

小提琴：http://jsfiddle.net/rn3nc/1

---

與jQuery的事件代表團：

請注意方法1，處理程序是直接綁定到該元素。如果你期待的DOM更新和新li s到用於注射，最好使用事件委託和委託，將保持靜態的下一個元素，在這種情況下，.nav：

$('.nav').on('click', 'li', function(){ 
    $('.nav li').removeClass('active'); 
    $(this).addClass('active'); 
}); 

小提琴：http://jsfiddle.net/bvf9u/1/

的細微差別是，處理程序綁定到現在.nav，所以當你點擊li事件氣泡了DOM到如果元素點擊您selector參數匹配其調用處理程序的.nav。這意味着新元素不需要綁定到它們的新處理程序，因爲它已經綁定到了祖先。

這真的很有趣。瞭解更多關於在這裏：​​http://api.jquery.com/on/

Answer 2

//編寫JavaScript方法綁定每一個「李」的單擊事件項目

function BindClickEvent() 
    { 
    var selector = '.nav li'; 
    //Removes click event of each li 
    $(selector).unbind('click'); 
    //Add click event 
    $(selector).bind('click', function() 
    { 
     $(selector).removeClass('active'); 
     $(this).addClass('active'); 
    }); 

    } 

//先調用此方法時，第一次，當頁面加載

$(document).ready(function() { 
     BindClickEvent(); 
    }); 

//從服務器側呼叫BindClickEvent方法

protected void Page_Load(object sender, EventArgs e) 
    { 
     ScriptManager.RegisterStartupScript(Page,GetType(), Guid.NewGuid().ToString(),"BindClickEvent();",true); 
    } 

Answer 3

稍微偏離託皮C，但這裏已經到達，而開發一個Angular2程序，我想和大家分享的是Angular2自動添加類「路由器鏈接激活」主動路由器鏈接，如這一個：

<li><a [routerLink]="['Dashboard']">Dashboard</a></li> 

您因此可以輕鬆的風格，例如鏈接使用CSS：

.router-link-active { 
    color: red; 
} 

Answer 4

 // Remove active for all items. 
     $('.sidebar-menu li').removeClass('active'); 
     // highlight submenu item 
     $('li a[href="' + this.location.pathname + '"]').parent().addClass('active'); 
     // Highlight parent menu item. 
     $('ul a[href="' + this.location.pathname + '"]').parents('li').addClass('active') 

Answer 5

$(document).ready(function() { 
    $('.dates li a').click(function (e) { 

     $('.dates li a').removeClass('active'); 

     var $parent = $(this); 
     if (!$parent.hasClass('active')) { 
      $parent.addClass('active'); 
     } 
     e.preventDefault(); 
    }); 
});