时间戳

首页 > 解决方案 > 单击li时如何使li的边框出现

javascript - 单击li时如何使li的边框出现

问题描述

我不知道我说的是否正确，因为我是 HTML 新手。我有一个 ul 菜单，里面有四个盒子是 li 的。如果单击该框，我希望该框具有白色边框。

这是我的 HTML 代码：

$("ul.quantity-grid li").click(function(){
    $(this).addClass("active").siblings().removeClass("active");
});
.quantity-grid li.active{
  border:4px solid #fff;
}
<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>

我究竟做错了什么？

标签： javascriptjqueryhtmlcss

解决方案

将您的代码更改为这样

    $("ul.quantity-grid li").click(function(){
       
        $('ul.quantity-grid li').removeClass("active");
        $(this).addClass("active");
    });
.quantity-grid {
 background: red;
}
 .quantity-grid li.active{
            border:4px solid #fff;
  }
<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>

推荐阅读