时间戳

首页 > 解决方案 > 根据单选复选框隐藏/显示自我

html - 根据单选复选框隐藏/显示自我

问题描述

我正在一个只能使用 HTML 和 CSS（无脚本）的网站上工作。该平台是 Squarespace，它们使您很难使用代码，但我必须凑合。此外，他们对样式使用 LESS 预处理器。

我有 3 个 div，其中有一个全尺寸标签，然后是一个 svg 代码和文本（我将标签设为全尺寸，这样每当点击这些 div 时，就会发生一些事情）。

当您单击 3 个 div 中的任何一个时，它们都会消失，并出现带有“return”链接的第 4 个 div。当您单击“返回”时，其他 div 应该会重新出现，而“返回”会隐藏。但是，即使“返回”隐藏了，其他框也不会出现。

我需要用于样式的 flexbox 属性。

.resource-block {
  display: flex;
  width: 25vw;
  height: 25vw;
}

.resource-block-label {
  width: 25vw;
  height: 25vw;
  display: flex;
  cursor: pointer;
}

.resource-return-label {
  display: none;
  cursor: pointer;
}

.resource-block-input:checked~.resource-return-label {
  display: block;
}

.resource-block-input:checked~.resource-block {
  display: none;
}

.resource-return-input:checked~.resource-block {
  display: flex;
}

.resource-return-input:checked~.resource-return-label {
  display: none;
}
<div>
  <input name="resource-block" type="radio" id="rb-0" class="resource-block-input" />
  <div class="resource-block">
    <div class="resource-block-content">
      <label for="rb-0" class="resource-block-label">
                <svg>[svg code code]
                </svg>
                <span>1</span>
            </label>
    </div>
  </div>
  <input name="resource-block" type="radio" id="rb-1" class="resource-block-input" />
  <div class="resource-block">
    <div class="resource-block-content">
      <label for="rb-1" class="resource-block-label">
                <svg>[svg code code]
                </svg>
                <span>2</span>
            </label>
    </div>
  </div>
  <input name="resource-block" type="radio" id="rb-2" class="resource-block-input" />
  <div class="resource-block">
    <div class="resource-block-content">
      <label for="rb-2" class="resource-block-label">
                <svg>[svg code code]
                </svg>
                <span>3</span>
            </label>
    </div>
  </div>
  <input name="resource-return" type="radio" id="rb-return" class="resource-return-input">
  <label for="rb-return" class="resource-return-label">&lt Return</label>
</div>

标签： htmlcss

解决方案

返回按钮中的name=resource-returntoname=resource-block以便所有无线电输入相关。另外，我只是想知道为什么您不允许使用脚本或 javascript，因为 Squarespace 允许使用 javascript。

.resource-block {
  display: flex;
  width: 25vw;
  height: 25vw;
}

.resource-block-label {
  width: 25vw;
  height: 25vw;
  display: flex;
  cursor: pointer;
}

.resource-return-label {
  display: none;
  cursor: pointer;
}

.resource-block-input:checked~.resource-return-label {
  display: block;
}

.resource-block-input:checked~.resource-block {
  display: none;
}

.resource-return-input:checked~.resource-block {
  display: flex;
}

.resource-return-input:checked~.resource-return-label {
  display: none;
}
  <div>
    <input name="resource-block" type="radio" id="rb-0" class="resource-block-input" />
    <div class="resource-block">
      <div class="resource-block-content">
        <label for="rb-0" class="resource-block-label">
                  <svg>[svg code code]
                  </svg>
                  <span>1</span>
              </label>
      </div>
    </div>
    <input name="resource-block" type="radio" id="rb-1" class="resource-block-input" />
    <div class="resource-block">
      <div class="resource-block-content">
        <label for="rb-1" class="resource-block-label">
                  <svg>[svg code code]
                  </svg>
                  <span>2</span>
              </label>
      </div>
    </div>
    <input name="resource-block" type="radio" id="rb-2" class="resource-block-input" />
    <div class="resource-block">
      <div class="resource-block-content">
        <label for="rb-2" class="resource-block-label">
                  <svg>[svg code code]
                  </svg>
                  <span>3</span>
              </label>
      </div>
    </div>
    <input name="resource-block" type="radio" id="rb-return" class="resource-return-input">
    <label for="rb-return" class="resource-return-label">&lt Return</label>
  </div>

推荐阅读