如何选择多个圆形DIV元素？

Question

我正在尝试创建一个显示分为象限的圆圈的网页，并允许用户通过点击选择一个或多个象限。用户单击象限以选择它后，象限将改变颜色。

下面是一段HTML，显示了上面的两个象限。

使用HTML，CSS和/或JavaScript，我如何更新代码以实际执行此操作？

我尝试了各种解决方案，但我得到的最接近的是能够一次选择一个象限并改变封闭方形DIV的背景颜色，而不是圆形象限的颜色。

<div style="display:inline-block;
                position:relative;
                height:500px;
                width:500px;">
  <div style="position:absolute;
                    top:0;
                    left:0;">
    F1
  </div>
  <div style="background:#CCC;
                    border:2px solid #000;
                    border-radius:500px 0 0 0;
                    color:#000;
                    height:500px;
                    width:500px;">
  </div>
</div>

<div style="display:inline-block;
                position:relative;
                height:500px;
                width:500px;">
  <div style="position:absolute;
                    top:0;
                    right:0;">
    F2
  </div>
  <div style="background:#CCC;
                    border:2px solid #000;
                    border-radius:0 500px 0 0;
                    color:#000;
                    height:500px;
                    width:500px;">
  </div>
</div>

Answer 1

您可以使用flex，grid，inline-block等创建一个简单的2x2网格，并在容器上使用border radius而不是元素。

然后，您可以轻松添加JS代码，以便在点击时更改元素的背景颜色。

＆＃13;

＆＃13;

$('.box > div').click(function() {
  $(this).toggleClass('select');
})

＆＃13;

.box {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid;
  display: flex;
  flex-wrap: wrap;
}

.box>div {
  height: 50%;
  width: 50%;
  border: 1px solid #000;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.box>div.f1 {
  border-left: 0;
  border-top: 0;
  background: blue;
}

.box>div.f2 {
  border-right: 0;
  border-top: 0;
  background: red;
}

.box>div.f4 {
  border-right: 0;
  border-bottom: 0;
  background: green;
}

.box>div.f3 {
  border-left: 0;
  border-bottom: 0;
  background: orange;
}

.box>div.select {
  background: #111;
}

.box>div:hover {
  opacity: 0.5;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <div class="f1">F1</div>
  <div class="f2">F2</div>
  <div class="f3">F3</div>
  <div class="f4">F4</div>
</div>

＆＃13;

＆＃13;

＆＃13;