如何使用jQuery实现点击HTML5列表项时切换default类？

当然可以轻松实现这个需求！这是很常见的Tab切换高亮场景，我给你提供两种jQuery实现方式，根据你的实际情况选择：

基础实现（静态元素） #

如果你的<li>元素是页面加载时就存在的静态内容，用这个方案就足够了：

首先是你的HTML结构（保持不变）：

<ul id="ul-graellatab-list" class="tabs"> 
  <li><a href="#" class="tabs_menu default">Temperature</a></li> 
  <li><a href="#" class="tabs_menu">Humidity</a></li> 
  <li><a href="#" class="tabs_menu">Pressure</a></li> 
</ul>

然后添加jQuery代码：

$(document).ready(function() {
  // 给每个列表项绑定点击事件
  $('#ul-graellatab-list li').click(function(e) {
    // 阻止a标签默认的跳转行为（避免页面跳转到顶部）
    e.preventDefault();
    
    // 先移除所有tab菜单的default类
    $('.tabs_menu').removeClass('default');
    
    // 给当前点击项内部的a标签添加default类
    $(this).find('.tabs_menu').addClass('default');
  });
});

进阶实现（支持动态元素） #

如果你的<li>是后续通过JavaScript动态生成的，推荐用事件委托的方式，这样新添加的元素也能触发点击事件：

$(document).ready(function() {
  // 把事件绑定到父级ul上，监听子元素li的点击
  $('#ul-graellatab-list').on('click', 'li', function(e) {
    e.preventDefault();
    
    $('.tabs_menu').removeClass('default');
    $(this).find('.tabs_menu').addClass('default');
  });
});

关键逻辑说明 #

1. $(document).ready()：确保DOM完全加载后再执行JS代码，避免找不到目标元素。
2. e.preventDefault()：阻止<a>标签默认的跳转行为，防止页面滚动到顶部（因为你的a标签href是#）。
3. 先全局移除所有.tabs_menu的default类，再给当前点击项添加，这样就能保证只有当前点击的Tab项处于高亮状态。

内容的提问来源于stack exchange，提问作者Salvador Borés