jQuery点击元素添加高亮

创客云

jquery怎么在点击li标签之后添加一个在class,点击下一个li时删除上一个class?点击当前li元素后是用removeClass()删除所有兄弟元素(使用siblings()获取)的class样式,然后使用addClass()为当前li添加class。

具体演示如下:

1、HTML结构:设计三个li元素

  1. <ul id="test">
  2.     <li>Glen</li>
  3.     <li>Tane</li>
  4.     <li>John</li>
  5. </ul>

2、css样式:设计一个类selected,表示选中后的效果

  1. <style>.selected{font-weight:bold; background: #ff99cc; color:#fff;}</style>

3、jquery代码:

  1. $(function(){
  2.     $("#test li").click(function() {
  3.         $(this).siblings('li').removeClass('selected');  // 删除其他兄弟元素的样式
  4.         $(this).addClass('selected');                            // 添加当前元素的样式
  5.     });
  6. });

4、效果演示:

本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/47303.html
云模板

发表评论