如何设置初始激活标签背景色与选中标签一致，无需点击触发

我明白你的需求啦——现在点击标签能切换蓝色背景，但第一个标签默认没激活样式，得让它一开始就有选中的背景色，而且切换其他标签时能正常移除它的背景色对吧？

只需要给第一个标签默认加上selected类就行，同时保留你原本的JS逻辑，就能完美实现需求。下面是修改后的完整代码：

<ul id="navigation">
  <!-- 给第一个li默认添加selected类 -->
  <li class="selected">标签1</li>
  <li>标签2</li>
  <li>标签3</li>
</ul>

<style>
.selected {
  background-color: blue;
  color: white; /* 额外加个文字颜色对比，提升视觉体验 */
  padding: 5px 10px;
}
#navigation li {
  display: inline-block;
  cursor: pointer;
  margin-right: 10px;
}
</style>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function() {
  $('#navigation li').click(function() {
    $('#navigation li').removeClass('selected');
    $(this).addClass('selected');
  });
});
</script>

为什么这样改？ #

1. 初始状态设置：给第一个<li>手动添加selected类，让页面加载完成后它就有激活状态的背景色，和点击选中的标签样式保持一致。
2. 原有逻辑复用：你写的点击事件逻辑已经能处理“移除所有标签的选中样式，给当前点击的标签添加样式”，所以切换其他标签时，第一个标签的selected类会被自动移除，完全符合需求。

如果不想在HTML里手动加类，也可以用JS初始化时自动给第一个标签添加类，适合动态生成标签的场景，代码如下：

$(function() {
  // 初始化时给第一个li添加selected类
  $('#navigation li:first').addClass('selected');
  
  $('#navigation li').click(function() {
    $('#navigation li').removeClass('selected');
    $(this).addClass('selected');
  });
});

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