javascript's docs

2.0 使用jquery实现list的动态active效果


1. 需求背景

ulli元素上增加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');
});