JS中点击某项列表，其背景颜色标为红色，其他的背景颜色为白色

在JavaScript中，你可以通过事件监听和DOM操作来实现这个功能。假设你有一个包含多项列表的ul元素，可以这样做：

// 获取所有的列表项（li元素）
const listItems = document.querySelectorAll('ul li');

// 为每个列表项添加点击事件处理器
listItems.forEach(item => {
  item.addEventListener('click', function() {
    // 首先，将当前选中的项设为红色背景
    this.style.backgroundColor = 'red';

    // 然后，遍历所有其他未选中的项，恢复白色背景
    for (let i = 0; i < listItems.length; i++) {
      if (listItems[i] !== this) {
        listItems[i].style.backgroundColor = 'white';
      }
    }
  });
});

当用户点击任一列表项时，该列表项会变为红色，而其他项会变回白色。注意这里我们使用`this`关键字来引用触发事件的元素。

相关问题

用微信小程序编写：ab栏背景色为白色、选中颜色为红色

在微信小程序中，如果你想让两个并列的选项卡（通常称为`view`组件，如`<navigator>`, `<tab-view>`中的标签项）ab栏分别默认背景色为白色，选中时变为红色，你可以通过设置它们的样式来实现。以下是一个基本的例子：

<tab-view>
  <tab-item wx:if="{{currentIndex === 0}}" value="0" selectedColor="#FF0000">
    <text>选项A</text>
  </tab-item>
  <tab-item wx:if="{{currentIndex === 1}}" value="1" selectedColor="#FF0000">
    <text>选项B</text>
  </tab-item>
</tab-view>

<style>
.tab-bar {
  background-color: white; /* 默认背景色 */
}
.tab-item.wx_selected {
  background-color: red; /* 选中时背景色 */
}
</style>

在这个例子中，每个`tab-item`都有一个`selectedColor`属性，当你点击对应的项时，它的值会被设为`#FF0000`，表示红色。同时，你需要在`tab-view`的`currentItem`数据绑定上监听用户的切换动作，例如：

Page({
  data: {
    currentIndex: 0,
  },
  onTap: function(item) {
    this.setData({
      currentIndex: item.value,
    });
  }
})

每当用户选择一个新的选项，`onTap`函数会更新`currentIndex`，从而改变当前选中的`tab-item`。

设计导航栏和tab栏：要求设计五个页面，导航栏背景色为白色，文字为“测试”tab栏背景色为白色，选中颜色为红色

设计导航栏和Tab栏是一个常见的前端UI任务，通常用于组织网站或应用的主要入口。以下是基于您的需求的一个基本步骤描述：

**导航栏设计**：
1. **布局**：保持简洁，你可以选择水平或垂直布局。由于您提到背景色为白色，可以考虑将“测试”字样设为中心或居中对齐。
2. **样式**：创建一个白色的`<nav>`标签作为容器，设置宽度为100%。每个页面链接可以用`<a>`标签表示，文字内容为"测试"，字体颜色为黑色（CSS代码如：`.navbar a { color: black; }`）。
3. **选中状态**：为当前页添加特定类名（例如`.active`)，对应的CSS会改变其文本颜色为白色（`.navbar .active a { color: white; background-color: red;}`），以便用户识别。

**Tab栏设计**：
1. **结构**：同样采用类似的方式，使用`<ul>`和`<li>`创建一个Tab列表。每个`<li>`代表一个页面，同时包含一个内部的`<a>`标签。
2. **样式**：设置初始背景色为白色，当选中时（可能是通过JavaScript监听点击事件）改变背景色为红色。如`:hover`效果下背景变为灰色，选中时 `.tab-bar li.active` 类的背景色为红色。
3. 使用伪元素`:before`和`:after`添加合适的图标或者边框指示当前选中状态。

.tab-bar {
  display: flex;
  justify-content: space-around;
  background-color: white;
}
.tab-bar li {
  list-style-type: none;
  cursor: pointer;
}
.tab-bar li a {
  color: black;
  padding: 10px 20px;
}
.tab-bar li:hover {
  background-color: grey;
}
.tab-bar li.active {
  background-color: red;
  border-bottom: 4px solid red;
}