Question

我有两个单选按钮显示/隐藏div我的网站哦。第一个单选按钮控制div的可见性。在这个div我有另一个单选按钮，显示/隐藏另一个div。第一个单选按钮有效，但是当我点击第二个单选按钮时没有任何反应。

这是我的HTML和CSS代码的一个例子：

HTML：

<body>


    <label for="a">B</label><input type="radio" id="a" name="a" value="1">

    <div id="B">

        <p>Div B</p>
        <label for="c">D</label><input type="radio" id="c" name="c" value="1">

    </div>

    <div id="D">

        <p>Div D</p>

    </div>

</body>

CSS：

#B
{
    float:left;
    background-color: green;
    width: 150px;
    height: 50px;

    display: none;
}

#D
{
    float:right;
    background-color: red;
    width: 150px;
    height: 50px;

    display: none;
}

#a:checked ~ #B
{
    display: block;
}

#c:checked ~ #D
{
    display: block;
}

我不明白为什么第二个按钮什么都不做。有没有使用JS的解决方案？

谢谢，

Answer 1

正如@showdev所说，#c不是#D的兄弟姐妹，所以兄弟选择者在这种情况下不会起作用。

如果您希望仅使用CSS，则必须更改结构或使用javascript执行此操作。

编辑：我只使用CSS和HTML安排：

See this fiddle

HTML：

<body>
    <label for="a">B</label><input type="radio" id="a" name="a" value="1">
    <div id="B">
        <p>Div B</p>
    </div>
    <label for="c">D</label><input type="radio" id="c" name="c" value="1">
    <div id="D">
      <p>Div D</p>
    </div>
</body>

改变的CSS：

#a:checked ~ #B
{
    display: block;
}
#c:checked ~ #D 
{
    display: block;
}
label:nth-of-type(2), input:nth-of-type(2) { display: none; clear: both;}

#a:checked ~ label:nth-of-type(2), #a:checked ~ input:nth-of-type(2) {
  display: block;
}

Answer 2

你应该使用javascript，除非你需要一个完全不涉及js的限制解决方案..你可以使用onClick函数轻松解决你的问题，如下所示：

<input type="radio" id="a" name="a" value="1" onclick="somefunctionA()">
<label for="c">D</label><input type="radio" id="c" name="c" value="1" onclick="somefunctionB()">
<script>
    function somefunctionA(){
        //do something!
    }

    function somefunctionB(){
        //do something!
    }
</script>

为什么特殊部门的HTML中的单选按钮不起作用？

2 个答案: