如何在页面加载时为第二个列表项设置默认active类

嘿，刚接触HTML、CSS这些技术不用焦虑，有疑问都是学习过程里的正常事儿😉。针对你的需求，我整理了两种简单好上手的实现方式：

方法1：直接在HTML中添加active类（最省心的静态方案） #

既然你需要页面一加载就让第二个列表项处于激活状态，最直接的方式就是给对应的<li>标签手动加上active类。这样页面渲染完成后，CSS里的激活样式会直接生效，完全不需要额外改JS。

修改后的HTML代码：

<ul class="quantity-grid">
  <li class="1bag" value="1">
    <h3>1 BAG, $35</h3>
  </li>
  <li class="2bags active" value="2"> <!-- 这里新增了active类 -->
    <h3>2 BAGS, $45</h3>
  </li>
  <li class="3bags" value="3">
    <h3>3 BAGS, $65</h3>
  </li>
  <li class="4bags" value="4">
    <h3>4 BAGS, $55</h3>
  </li>
</ul>

方法2：通过JavaScript动态设置（适合需要动态判断的场景） #

如果你的初始激活状态需要根据某些条件动态调整，或者不想改动HTML代码，可以在JS里添加页面加载完成后的初始化逻辑：

修改后的JS代码：

// 确保DOM元素都加载完成后再执行操作
$(document).ready(function() {
  // 选中第二个列表项（jQuery的eq()索引从0开始，第二个对应索引1）并添加active类
  $("ul.quantity-grid li").eq(1).addClass("active");
  
  // 保留你原本的点击切换逻辑
  $("ul.quantity-grid li").click(function(){
    $(this).addClass("active").siblings().removeClass("active");
  });
});

小提醒 #

另外注意下你的CSS里.quantity-grid li.active是白色边框，要确保这个颜色在你的页面背景下是清晰可见的哦～

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