Question

很抱歉，如果我使用的语法/术语已关闭，我是html，css等新手。我希望在加载页面时，我的ul中的第二个列表项处于活动状态。我该怎么做。

这是我的HTML：

  <ul class="quantity-grid">
           <li class="1bag" value="1">
               <h3>1 BAG, $35</h3>
           </li>

           <li class="2bags" value="2">
               <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>

这是我的css：

 .quantity-grid li{
    border:4px solid transparent;
    margin:3%;
    overflow:hidden;
 }

 .quantity-grid li.active{
   border:4px solid #fff;
 }

这是我的JS：

 $("ul.quantity-grid li").click(function(){
      $(this).addClass("active").siblings().removeClass("active");
 });

不确定从哪里开始......

Answer 1

.active表示当元素被聚焦（通常用于textBoxes）时，您只需要添加一个类名为active的样式，它应该可以工作。

$("ul.quantity-grid li").click(function() {
  $(this).addClass("active").siblings().removeClass("active");
});

.quantity-grid li {
  margin: 3%;
  overflow: hidden;
}

.active {
  border: 4px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="quantity-grid">
  <li class="1bag" value="1">
    <h3>1 BAG, $35</h3>
  </li>

  <li class="active 2bags" value="2">
    <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>

Answer 2

这就是你如何做到这一点......在页面加载第二个元素应该有类"active"

    $(document).ready(function(){
        $("ul.quantity-grid li:nth-of-type(2)").addClass("active");
    });

如果您始终希望第二个元素处于活动状态nth-of-type，请使用OR在jQuery本身的html中使用class="2bags active"来执行此操作

    $(document).ready(function(){
        $(".2bags").addClass("active");
    });

如何为第二个列表项应用默认活动类

2 个答案: