Question

我不知道我说的是否正确，因为我不熟悉HTML。我有一个带有四个盒子的ul菜单。如果我点击那个框，我想要一个带有白色边框的框。

这是我的HTML代码：

＆＃13;

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

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="quantity-grid">
  <li class="1bag" data-value="1">
    <h3>1 BAG, $35</h3>
    <img src="img/1bag.png">
  </li>

  <li class="2bags" data-value="2">
    <h3>2 BAGS, $45</h3>
    <img src="img/2bags.png">
  </li>

  <li class="3bags" data-value="3">
    <h3>3 BAGS, $65</h3>
    <img src="img/3bags.png">
  </li>

  <li class="4bags" data-value="4">
    <h3>4 BAGS, $55</h3>
    <img src="img/4bags.png">
  </li>
</ul>

＆＃13;

我做错了什么？

Answer 1

将您的代码更改为

＆＃13;

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

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="quantity-grid">
            <li class="1bag" data-value="1">
                <h3>1 BAG, $35</h3>
                <img src="img/1bag.png">
            </li>

            <li class="2bags" data-value="2">
                <h3>2 BAGS, $45</h3>
                <img src="img/2bags.png">
            </li>

            <li class="3bags" data-value="3">
                <h3>3 BAGS, $65</h3>
                <img src="img/3bags.png">
            </li>

            <li class="4bags" data-value="4">
                <h3>4 BAGS, $55</h3>
                <img src="img/4bags.png">
            </li>
        </ul>

＆＃13;

单击li时如何显示li的边框

1 个答案: