时间戳

首页 > 解决方案 > 无法使用 CSS 隐藏内容并再次正确显示，不同的类会干扰

html - 无法使用 CSS 隐藏内容并再次正确显示，不同的类会干扰

问题描述

我无法隐藏列表中的内容并再次正确显示它，因为一个类会干扰其他类。如果您单击其中一个 100 毫升链接，它会移动其他 100 毫升具有不同类别（picantesemillascien 和 picante-cien 类别）的内容。

HTML 代码是：

li.picantesemillascien {
  display:none;
}

li.picantesemillastrescientos {
  display:inline-block;
}

.picantesemillas{
width:100%;
}

.picantesemillas a[class="picantesemillascien"]:focus ~ li:not([class="picantesemillascien"]) {
 display:none;
}

.picantesemillas a[class="picantesemillascien"]:focus ~ li[class="picantesemillascien"] {
 display:inline-block;
}

.picantesemillas a[class="picantesemillastrescientos"]:focus ~ li[class="picantesemillastrescientos"] {
 display:inline-block;
}

.card{
  display: inline-block;
}

li.picante-cien {
  display:none;
}

li.picante-trescientos {
  display:inline-block;
}

.picante{
width:100%;
}

.picante a[class="picante-cien"]:focus ~ li:not([class="picante-cien"]) {
 display:none;
}

.picante a[class="picante-cien"]:focus ~ li[class="picante-cien"] {
 display:inline-block;
}

.picante a[class="picante-trescientos"]:focus ~ li[class="picante-trescientos"] {
 display:inline-block;
}
<div class="picantesemillas">
  <a href="#" class="picantesemillascien">100ml</a>
  <a href="#" class="picantesemillastrescientos">300ml</a>
  <li class="picantesemillascien">
    semillas cien
  </li>
  <li class="picantesemillastrescientos">
    semillas trescientos
  </li>
</div>
<div class="picante">
  <a href="#" class="picante-cien">100ml</a>
  <a href="#" class="picante-trescientos">300ml</a>
  <li class="picante-cien">
    picante cien
  </li>
  <li class="picante-trescientos">
    picante trescientos
  </li>
</div>

标签： htmlcss

解决方案

首先，欢迎来到 StackOverflow！

除非出于某种原因您不能使用 JavaScript，否则通过提供功能并操作 DOM 而不是使用 CSS 显示/隐藏可能会更好地服务于您的用例。通常，focus伪选择器用作可访问性增强。

以下是完成相同功能的快速模型。此外，纯粹为了简洁，我去掉了<div>and<li>元素，并将主要元素制作为 HTML 段落，并带有可以交换的 span。此外，所有被调用的 CSS（这有点难以遵循）已被删除，因为在使用 JavaScript 时它不是必需的。

代码甚至可以更优雅——下面是为了简单起见。

<p>
  <a href="#" onclick="selectionA1()">100ml</a>
  <a href="#" onclick="selectionA2()">300ml</a>
    <span id="choice1">semillas cien</span>
</p>
<p>
  <a href="#" onclick="selectionB1()">100ml</a>
  <a href="#" onclick="selectionB2()">300ml</a>
    <span id="choice2">picante cien</span>
</p>

<script>
  function selectionA1() {
    document.getElementById("choice1").innerHTML = "semillas cien";
  }
  function selectionA2() {
    document.getElementById("choice1").innerHTML = "semillas trescientos";
  }
  function selectionB1() {
    document.getElementById("choice2").innerHTML = "picante cien";
  }
  function selectionB2() {
    document.getElementById("choice2").innerHTML = "picante trescientos";
  }
</script>

推荐阅读