logo标签列表

根据所选值显示或隐藏div

htmlcss
3
我有几个块，我希望根据所选选项显示它们的其中之一。 

div {
  display: none;
}
select[value="test1"] ~ #targ1 {
  display: block;
}
select[value="test2"] ~ #targ2 {
  display: block;
}
select[value="test3"] ~ #targ3 {
  display: block;
}
Dropdown list:
<select>
  <option value="test1">Test a</option>
  <option value="test2">Test b</option>
  <option value="test3">Test c</option>
</select>

<div id="targ1">Test 1</div>
<div id="targ2">Test 2</div>
<div id="targ3">Test 3</div>

我还尝试了其他选择器，比如select[selected] ~ div或option:focus #targ1。
我甚至尝试在select元素上添加一个::after伪元素，但是在option标签内的div会被忽略或表现奇怪。看起来select和option标签有一些我在w3schools中没有找到的规则。
如何仅使用HTML和CSS根据当前选定的option显示和隐藏div元素？
编辑：最简单的解决方法是内联JS，但我正在寻找无JS解决方案。 

[data-value=test1] ~ #test1 {
    color: red;
}
[data-value=test2] ~ #test2 {
    color: green;
}
[data-value=test3] ~ #test3 {
    color: blue;
}
<select onchange="this.dataset.value = this.value" data-value="test1">
  <option value="test1" checked>Test a</option>
  <option value="test2">Test b</option>
  <option value="test3">Test c</option>
</select>

<div id="test1">Target 1</div>
<div id="test2">Target 2</div>
<div id="test3">Target 3</div>

这是不可能的，没有 JavaScript。 - Rick Hitchcock
2个回答
3

坏消息

为了使用CSS检测当前选中的选项，您需要将:checked伪类应用于option元素，而不是select元素。有关更多信息，请参见问题“CSS :selected伪类类似于:checked，但适用于< select >元素”。

option:checked {
  font-weight: bold;
}
<select>
  <option>Choice 1</option>
  <option>Choice 2</option>
</select>

结合CSS组合器（相邻兄弟选择器+, 一般兄弟选择器~, 子元素选择器>和后代选择器），令人沮丧的是无法有效地选择父级或表亲...而且由于HTML规范select元素允许的内容为“零个或多个option或optgroup元素”，因此仅使用CSS无法使用下拉框的值来影响div。

使用JavaScript与下拉框

下面的示例监视选项元素的更改。当发生更改时，它会获取新选择的选项元素，并从data attribute中读取该选项的目标（这是一种很好的便利，因为它允许您在HTML中直接指定筛选目标--从而使您的模型和控制逻辑分离）。然后，它遍历所有有效的目标，并根据数据属性提供的列表是否包含该目标来添加或删除.hidden类。 

var filter = document.getElementById('filter');

filter.addEventListener('change', function() {
  var option = this.options[this.selectedIndex];
  var targets = option.dataset.targets.split(/(\s+)/);
  for (var target of document.getElementsByClassName('target')) {
    if (targets.indexOf(target.id) >= 0)
      target.classList.remove('hidden');
    else
      target.classList.add('hidden');
  }
});
.target {
  display: block;
}

.target.hidden {
  display: none;
}
<select id="filter">
  <option data-targets="">Show no targets</option>
  <option data-targets="t1">Show target 1</option>
  <option data-targets="t2">Show target 2</option>
  <option data-targets="t1 t2">Show targets 1 and 2</option>
</select>

<div class="target hidden" id="t1">Thsi is the first target.</div>
<div class="target hidden" id="t2">This is the second target.</div>

不使用JavaScript使用单选按钮

与下拉元素不同，单选按钮不需要嵌套在包装元素内。因此，您可以构建HTML，使div元素成为单选按钮的一般同级元素，并且您可以使用:checked类来影响它们的可见性。

.target {
  display: none;
}

#f1:checked ~ #t1 {
  display: block;
}

#f2:checked ~ #t2 {
  display: block;
}

#f3:checked ~ #t1,
#f3:checked ~ #t2 {
  display: block;
}
<input type="radio" name="filter" id="f0" checked><label for="f0">Show no targets</label><br>
<input type="radio" name="filter" id="f1"><label for="f1">Show target 1</label><br>
<input type="radio" name="filter" id="f2"><label for="f2">Show target 2</label><br>
<input type="radio" name="filter" id="f3"><label for="f3">Show targets 1 and 2</label>

<div class="target" id="t1">This is the first target.</div>
<div class="target" id="t2">This is the second target.</div>

2

@Woodrow Barlow的回答很好，但问题更与JS无关。

因此，以下代码片段是一个很好的例子，我实际上在几个页面中使用了这种技术：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            span,
            li {
                display: none;
            }

            ul {
                border: 1px solid black;
            }

            ul:focus li {
                display: block;
            }

            #rad1:checked ~ ul > #opt1,
            #rad1:checked ~ #targ1 {
                display: block;
            }

            #rad2:checked ~ ul > #opt2,
            #rad2:checked ~ #targ2 {
                display: block;
            }

            #rad3:checked ~ ul > #opt3,
            #rad3:checked ~ #targ3 {
                display: block;
            }
        </style>
    </head>
    <body>
        <input id="rad1" type="radio" name="targ" value="1" hidden checked />
        <input id="rad2" type="radio" name="targ" value="2" hidden />
        <input id="rad3" type="radio" name="targ" value="3" hidden />

        <h4>Dropdown list:</h4>
        <ul tabindex="-1">
            <li id="opt1"><label for="rad1">Test 1</label></li>
            <li id="opt2"><label for="rad2">Test 2</label></li>
            <li id="opt3"><label for="rad3">Test 3</label></li>
        </ul>

        <span id="targ1">Test 1</span>
        <span id="targ2">Test 2</span>
        <span id="targ3">Test 3</span>
    </body>
</html>

对于只有两种状态的常规下拉列表，可以使用。

使用URL哈希的第一个答案摘要：

<!DOCTYPE html>
<html>
    <style>
        [id*="item"] {
            display: none;
        }

        [id*="item"]:target {
            display: block;
        }
    </style>
    <body>
        <div>
            <a href="#item1">show item1</a>
            <a href="#item2">show item2</a>
            <a href="#item3">show item3</a>
        </div>

        <div tabindex="0" id="item1">item1</div>
        <div tabindex="0" id="item2">item2</div>
        <div tabindex="0" id="item3">item3</div>
    </body>
</html>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接