jquery如何做导航菜单栏点击更换body背景色（防刷新）

可以通过以下步骤实现：

1. 给导航菜单栏的每个选项添加一个自定义属性（例如，data-color），用于存储对应的背景颜色值。

2. 使用 jQuery 绑定导航菜单栏选项的 click 事件，在点击时获取对应的背景颜色值，然后将其设置为 body 的背景色。

3. 使用浏览器本地存储（localStorage）来保存当前选择的背景颜色值，以便在页面刷新后可以保持背景颜色不变。

下面是实现代码示例：

HTML 代码：

<ul class="nav">
  <li data-color="#f00">Red</li>
  <li data-color="#0f0">Green</li>
  <li data-color="#00f">Blue</li>
</ul>

JavaScript 代码：

$(function() {
  // 绑定导航菜单栏选项的 click 事件
  $('.nav li').on('click', function() {
    // 获取当前选项的背景颜色值
    var color = $(this).data('color');
    // 将背景颜色设置为 body 的背景色
    $('body').css('background-color', color);
    // 使用 localStorage 存储当前选择的背景颜色值
    localStorage.setItem('bgColor', color);
  });

  // 页面加载时，从 localStorage 中获取上次选择的背景颜色值并设置为 body 的背景色
  var lastColor = localStorage.getItem('bgColor');
  if (lastColor) {
    $('body').css('background-color', lastColor);
  }
});

上述代码实现了在导航菜单栏选项点击时更换 body 背景色，并使用 localStorage 存储当前选择的背景颜色值。在页面刷新后，可以从 localStorage 中获取上次选择的背景颜色值并设置为 body 的背景色，从而保持背景颜色不变。