使用jQuery+localStorage实现导航标签记忆时出现.css is not a function错误

嘿，我一眼就瞅出问题所在啦！那个.css is not a function报错，是因为你从localStorage里取出来的clickedtab是个字符串类型的id（比如"home"），它不是jQuery对象，自然没法调用.css()方法~ 下面给你修正方案，顺便优化下代码结构：

核心错误修正 #

把这行有问题的代码：

clickedtab.css(‘background’, ’black’);

改成：

$("#" + clickedtab).css('background', 'black');

只有通过$("#id")选中对应DOM元素生成jQuery对象后，才能调用jQuery的.css()方法。

优化后的完整代码 #

HTML部分（和你原代码一致，无需修改） #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <div id="home" class="menu_align active_one">Home</div>
  <div id="profile" class="menu_align">Profile</div>
  <div id="notifs" class="menu_align">Notifications</div>
</div>

JavaScript部分 #

$(document).ready(function() {
  // 页面加载时恢复上次选中的标签背景
  const clickedTabId = localStorage.getItem("clicked");
  if (clickedTabId) {
    // 先重置所有标签背景为白色
    $(".menu_align").css('background', 'white');
    // 给保存的标签设置黑色背景
    $("#" + clickedTabId).css('background', 'black');
  } else {
    // 默认选中home标签
    $("#home").css('background', 'black');
  }

  // 用事件委托绑定点击事件，不用给每个标签单独写逻辑
  $(".menu").on("click", ".menu_align", function() {
    // 重置所有标签背景为白色
    $(".menu_align").css('background', 'white');
    // 当前点击的标签设为黑色背景
    $(this).css('background', 'black');
    // 把当前标签id存入localStorage做持久化
    localStorage.setItem("clicked", $(this).attr('id'));
  });
});

额外说明 #

• 我补充了重置所有标签背景的逻辑，避免点击多个标签后出现多个黑色背景的混乱情况；
• 改用事件委托绑定点击事件，比给每个标签单独绑定更简洁，后期新增标签也不用修改JS代码；
• 注意你原代码里用了中文引号‘’，建议统一改成英文引号''，避免潜在的语法问题。

内容的提问来源于stack exchange，提问作者Mack Trivedi