单击li标签后如何保持：active css样式

可以使用CSS中的:active选择器来实现这个效果。当用户单击标签时，该标签会处于活动状态，此时:active选择器会为该标签应用CSS样式。例如：

li:active {
  background-color: yellow;
}

这样，当用户单击<li>标签时，该标签的背景颜色会变为黄色，直到用户松开鼠标。注意，这只是一个示例，您可以根据需要更改样式。

相关问题

vue3.0,element为基础编写单击li标签后保持active css样式的代码

在Vue 3.0中，您可以使用v-bind:class指令和:active伪类来实现此效果。下面是一个示例代码：

<template>
  <div>
    <ul>
      <li :class="{ active: isActive }" @click="toggleActive">Item 1</li>
      <li :class="{ active: isActive }" @click="toggleActive">Item 2</li>
      <li :class="{ active: isActive }" @click="toggleActive">Item 3</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false,
    };
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive;
    },
  },
};
</script>

<style>
li:active {
  background-color: yellow;
}
.active {
  background-color: blue;
  color: white;
}
</style>

在这个例子中，我们定义了一个isActive属性，它用于切换li标签的active样式。我们使用v-bind:class指令将active类与isActive属性绑定，这样当isActive为true时，li标签就会具有active类。我们还在li:active伪类中定义了一个背景颜色，当用户单击li标签时，它会呈现黄色背景。最后，我们还定义了一个.active样式，这样当li标签处于活动状态时，它们将具有蓝色背景和白色文字颜色。

vue3.0,element为基础编写单击li标签后，被点击的li标签保持active css样式，其他li标签不受影响，维持初始状态的代码

你可以在点击事件中给被点击的 li 标签添加一个 active 类，并在 CSS 中定义 active 类的样式。同时，你需要在其他 li 标签中移除 active 类，以保证它们不会受到影响。下面是一个示例代码：

HTML：

<ul>
  <li @click="selectItem" :class="{ active: selectedItem === 'item1' }">Item 1</li>
  <li @click="selectItem" :class="{ active: selectedItem === 'item2' }">Item 2</li>
  <li @click="selectItem" :class="{ active: selectedItem === 'item3' }">Item 3</li>
</ul>

JS：

export default {
  data() {
    return {
      selectedItem: ''
    };
  },
  methods: {
    selectItem(event) {
      // 移除其他 li 标签的 active 类
      const lis = event.currentTarget.parentNode.children;
      for (let i = 0; i < lis.length; i++) {
        const li = lis[i];
        if (li !== event.currentTarget) {
          li.classList.remove('active');
        }
      }
      // 添加被点击的 li 标签的 active 类
      this.selectedItem = event.currentTarget.innerText;
      event.currentTarget.classList.add('active');
    }
  }
};

CSS：

li.active {
  background-color: #ccc;
}

这样，当你点击某个 li 标签时，它将会添加 active 类，其他 li 标签会移除 active 类，保持初始状态。同时，被添加了 active 类的 li 标签会应用 active 类的 CSS 样式。