通过单击图片

Question

我正在尝试通过图片实现块切换。 该功能是这样的： 如果选择了第一个图片，则显示第一个复选框，如果显示第二个，则显示第二个复选框。 告诉我如何在版式示例中实现这一点

https://jsfiddle.net/h15ay46v/

body {
  background-color: #000;
}

#switcher {
  position: absolute;
  top: 15px;
  left: 8px;
  display: flex;
  z-index: 1;
}

#switcher .first-image,
#switcher .second-image {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

#switcher .second-image {
  margin-left: 15px;
}

#switcher .first-image img.active {
  filter: drop-shadow(0 0 5px yellow);
}

#switcher .checkboxes-block {
  margin-left: 15px;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

#switcher .checkboxes-block li {
  display: inline-block;
  margin-bottom: 10px;
  margin-right: 10px;
}

#switcher .checkboxes-block .styled-checkbox {
  position: absolute;
  opacity: 0;
}

#switcher .checkboxes-block .styled-checkbox+label {
  position: relative;
  cursor: pointer;
  padding: 0;
  color: white;
}

#switcher .checkboxes-block .styled-checkbox+label:before {
  content: '';
  margin-right: 10px;
  display: inline-block;
  vertical-align: text-top;
  width: 14px;
  height: 14px;
  background: transparent;
  border: 2px white solid;
  border-radius: 4px;
}

#switcher .checkboxes-block .styled-checkbox:hover+label:before {
  background: #ffffff;
}

#switcher .checkboxes-block .styled-checkbox:focus+label:before {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}

#switcher .checkboxes-block .styled-checkbox:checked+label:before {
  background: #ffffff;
}

#switcher .checkboxes-block .styled-checkbox:checked+label:after {
  content: '';
  position: absolute;
  left: 2px;
  top: 8px;
  background: white;
  width: 2px;
  height: 2px;
  box-shadow: 2px 0 0 black, 4px 0 0 black, 4px -2px 0 black, 4px -4px 0 black, 4px -6px 0 black, 4px -8px 0 black;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#switcher .checkboxes-block .styled-checkbox:disabled+label {
  color: #b8b8b8;
  cursor: auto;
}

#switcher .checkboxes-block .styled-checkbox:disabled+label:before {
  box-shadow: none;
  background: #ddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="switcher">
  <div class="first-image">
    <img class="active" width="50" height="44" src="https://image.freepik.com/free-icon/information-logotype-circle_318-9441.jpg" alt="" />
  </div>
  <div class="second-image">
    <img width="66" height="54" src="https://image.freepik.com/free-icon/calendar-icon-black_318-9776.jpg" alt="" />
  </div>

  <div class="checkboxes-block" style="margin-left: 15px;">
    <ul class="unstyled centered">
      <li>
        <input class="styled-checkbox" id="styled-checkbox-1" type="checkbox" value="value1">
        <label for="styled-checkbox-1">Checkbox 1</label>
      </li>
      <li>
        <input class="styled-checkbox" id="styled-checkbox-2" type="checkbox" value="value2" checked="">
        <label for="styled-checkbox-2">Checkbox 2</label>
      </li>
      <li>
        <input class="styled-checkbox" id="styled-checkbox-3" type="checkbox" value="value3">
        <label for="styled-checkbox-3">Checkbox 3</label>
      </li>
    </ul>
  </div>

  <div style="display: none" class="checkboxes-block" style="margin-left: 15px;">
    <ul class="unstyled centered">
      <li>
        <input class="styled-checkbox" id="styled-checkbox-4" type="checkbox" value="value4">
        <label for="styled-checkbox-4">Checkbox 4</label>
      </li>
      <li>
        <input class="styled-checkbox" id="styled-checkbox-5" type="checkbox" value="value5">
        <label for="styled-checkbox-5">Checkbox 5</label>
      </li>
      <li>
        <input class="styled-checkbox" id="styled-checkbox-6" type="checkbox" value="value6">
        <label for="styled-checkbox-6">Checkbox 6</label>
      </li>
    </ul>
  </div>
</div>

Answer 1

var lastClicked = $('.first-image');
$(document).on('click', '.first-image', function() {
  if (lastClicked.index() == $(this).index())
    return;
  $('.first-block').show();
  lastClicked.find('.active').removeClass();
  $(this).find('img').addClass('active');
  $('.second-block').hide();
  lastClicked = $(this);
});

$(document).on('click', '.second-image', function() {
  if (lastClicked.index() == $(this).index())
    return;
  $('.second-block').show();
  lastClicked.find('.active').removeClass();
  $(this).find('img').addClass('active');
  $('.first-block').hide();
  lastClicked = $(this);
});

body {
  background-color: #000;
}

#switcher {
  position: absolute;
  top: 15px;
  left: 8px;
  display: flex;
  z-index: 1;
}

#switcher .first-image,
#switcher .second-image {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

#switcher .second-image {
  margin-left: 15px;
}

#switcher .first-image img.active {
  filter: drop-shadow(0 0 5px yellow);
}

#switcher .checkboxes-block {
  margin-left: 15px;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

#switcher .checkboxes-block li {
  display: inline-block;
  margin-bottom: 10px;
  margin-right: 10px;
}

#switcher .checkboxes-block .styled-checkbox {
  position: absolute;
  opacity: 0;
}

#switcher .checkboxes-block .styled-checkbox+label {
  position: relative;
  cursor: pointer;
  padding: 0;
  color: white;
}

#switcher .checkboxes-block .styled-checkbox+label:before {
  content: '';
  margin-right: 10px;
  display: inline-block;
  vertical-align: text-top;
  width: 14px;
  height: 14px;
  background: transparent;
  border: 2px white solid;
  border-radius: 4px;
}

#switcher .checkboxes-block .styled-checkbox:hover+label:before {
  background: #ffffff;
}

#switcher .checkboxes-block .styled-checkbox:focus+label:before {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}

#switcher .checkboxes-block .styled-checkbox:checked+label:before {
  background: #ffffff;
}

#switcher .checkboxes-block .styled-checkbox:checked+label:after {
  content: '';
  position: absolute;
  left: 2px;
  top: 8px;
  background: white;
  width: 2px;
  height: 2px;
  box-shadow: 2px 0 0 black, 4px 0 0 black, 4px -2px 0 black, 4px -4px 0 black, 4px -6px 0 black, 4px -8px 0 black;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#switcher .checkboxes-block .styled-checkbox:disabled+label {
  color: #b8b8b8;
  cursor: auto;
}

#switcher .checkboxes-block .styled-checkbox:disabled+label:before {
  box-shadow: none;
  background: #ddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="switcher">
  <div class="first-image">
    <img class="active" width="50" height="44" src="https://image.freepik.com/free-icon/information-logotype-circle_318-9441.jpg" alt="" />
  </div>
  <div class="second-image">
    <img width="66" height="54" src="https://image.freepik.com/free-icon/calendar-icon-black_318-9776.jpg" alt="" />
  </div>

  <div class="checkboxes-block first-block" style="margin-left: 15px;">
    <ul class="unstyled centered">
      <li>
        <input class="styled-checkbox" id="styled-checkbox-1" type="checkbox" value="value1">
        <label for="styled-checkbox-1">Checkbox 1</label>
      </li>
      <li>
        <input class="styled-checkbox" id="styled-checkbox-2" type="checkbox" value="value2" checked="">
        <label for="styled-checkbox-2">Checkbox 2</label>
      </li>
      <li>
        <input class="styled-checkbox" id="styled-checkbox-3" type="checkbox" value="value3">
        <label for="styled-checkbox-3">Checkbox 3</label>
      </li>
    </ul>
  </div>

  <div style="display: none" class="checkboxes-block second-block" style="margin-left: 15px;">
    <ul class="unstyled centered">
      <li>
        <input class="styled-checkbox" id="styled-checkbox-4" type="checkbox" value="value4">
        <label for="styled-checkbox-4">Checkbox 4</label>
      </li>
      <li>
        <input class="styled-checkbox" id="styled-checkbox-5" type="checkbox" value="value5">
        <label for="styled-checkbox-5">Checkbox 5</label>
      </li>
      <li>
        <input class="styled-checkbox" id="styled-checkbox-6" type="checkbox" value="value6">
        <label for="styled-checkbox-6">Checkbox 6</label>
      </li>
    </ul>
  </div>
</div>

Answer 2

像这样吗？

您可能希望将divs移出容器

$(function() {
  $(".swimage").on("click",function() {
    const block = $(".checkboxes-block").eq($(this).index());
    block.siblings(".checkboxes-block").hide("slow")
    block.slideToggle("slow")
  })
})

body {
  background-color: #000;
}

#switcher {
  position: absolute;
  top: 15px;
  left: 8px;
  display: flex;
  z-index: 1;
}

#switcher .first-image,
#switcher .second-image {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

#switcher .second-image {
  margin-left: 15px;
}

#switcher .first-image img.active {
  filter: drop-shadow(0 0 5px yellow);
}

#switcher .checkboxes-block {
  margin-left: 15px;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

#switcher .checkboxes-block li {
  display: inline-block;
  margin-bottom: 10px;
  margin-right: 10px;
}

#switcher .checkboxes-block .styled-checkbox {
  position: absolute;
  opacity: 0;
}

#switcher .checkboxes-block .styled-checkbox+label {
  position: relative;
  cursor: pointer;
  padding: 0;
  color: white;
}

#switcher .checkboxes-block .styled-checkbox+label:before {
  content: '';
  margin-right: 10px;
  display: inline-block;
  vertical-align: text-top;
  width: 14px;
  height: 14px;
  background: transparent;
  border: 2px white solid;
  border-radius: 4px;
}

#switcher .checkboxes-block .styled-checkbox:hover+label:before {
  background: #ffffff;
}

#switcher .checkboxes-block .styled-checkbox:focus+label:before {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}

#switcher .checkboxes-block .styled-checkbox:checked+label:before {
  background: #ffffff;
}

#switcher .checkboxes-block .styled-checkbox:checked+label:after {
  content: '';
  position: absolute;
  left: 2px;
  top: 8px;
  background: white;
  width: 2px;
  height: 2px;
  box-shadow: 2px 0 0 black, 4px 0 0 black, 4px -2px 0 black, 4px -4px 0 black, 4px -6px 0 black, 4px -8px 0 black;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#switcher .checkboxes-block .styled-checkbox:disabled+label {
  color: #b8b8b8;
  cursor: auto;
}

#switcher .checkboxes-block .styled-checkbox:disabled+label:before {
  box-shadow: none;
  background: #ddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="switcher">
  <div class="first-image swimage">
    <img class="active" width="50" height="44" src="https://image.freepik.com/free-icon/information-logotype-circle_318-9441.jpg" alt="" />
  </div>
  <div class="second-image swimage">
    <img width="66" height="54" src="https://image.freepik.com/free-icon/calendar-icon-black_318-9776.jpg" alt="" />
  </div>

  <div class="checkboxes-block" style="margin-left: 15px;">
    <ul class="unstyled centered">
      <li>
        <input class="styled-checkbox" id="styled-checkbox-1" type="checkbox" value="value1">
        <label for="styled-checkbox-1">Checkbox 1</label>
      </li>
      <li>
        <input class="styled-checkbox" id="styled-checkbox-2" type="checkbox" value="value2" checked="">
        <label for="styled-checkbox-2">Checkbox 2</label>
      </li>
      <li>
        <input class="styled-checkbox" id="styled-checkbox-3" type="checkbox" value="value3">
        <label for="styled-checkbox-3">Checkbox 3</label>
      </li>
    </ul>
  </div>

  <div style="display: none" class="checkboxes-block" style="margin-left: 15px;">
    <ul class="unstyled centered">
      <li>
        <input class="styled-checkbox" id="styled-checkbox-4" type="checkbox" value="value4">
        <label for="styled-checkbox-4">Checkbox 4</label>
      </li>
      <li>
        <input class="styled-checkbox" id="styled-checkbox-5" type="checkbox" value="value5">
        <label for="styled-checkbox-5">Checkbox 5</label>
      </li>
      <li>
        <input class="styled-checkbox" id="styled-checkbox-6" type="checkbox" value="value6">
        <label for="styled-checkbox-6">Checkbox 6</label>
      </li>
    </ul>
  </div>
</div>