XTY的小站
记录技术笔记和技术博客

jquery: 2.0 动态active

17 Nov 2016

1. 需求背景

当ul的li元素上增加active类时，该li会拥有底色，拥有li被选中的效果。
但是，我们不能实时手动去更改它，那如何实现当我们点击之后动态的激活li的类呢？

2. 代码实现

  1. 在我们选中一个li元素时，jquery寻找该元素的父元素，既ul元素。
  2. 然后使用find()方法找到拥有active类的元素，并去除active类。
  3. 最后，将选中的li元素上增加active类。
$(function() {
  $(this).parent().find(".active").removeClass("active");
  var url = window.location.pathname;
  $('ul.nav a[href="'+ url +'"]').parent().addClass('active');
});