【[HTML]CSS实现点击显示元素】

一、示例

代码如下（示例）：

<div>
            <input type="radio" name="box" id="box1" checked>
            <label for="box1">
                <div class="wu">1</div>
            </label>
            <div class="yi">
                <div class="er">元素1</div>
            </div>
            <input type="radio" name="box" id="box2">
            <label for="box2">
                <div class="wu">2</div>
            </label>
            <div class="yi">
                <div class="san">元素2</div>
            </div>
            <input type="radio" name="box" id="box3">
            <label for="box3">
                <div class="wu">3</div>
            </label>
            <div class="yi">
                <div class="si">元素3</div>
            </div>
</div>

二、CSS样式以及图解

代码如下（示例）：

 input[type="radio"],.yi{
                display: none;
            }
            input:checked+label+.yi{
                display: block;
            }
            .wu{
                width: 20px;
                height: 20px;
                background-color: #33C8FF;
                color: white;
                text-align: center;
                line-height: 20px;
                margin: 20px;
            }
            .er,.san,.si{
                width: 100px;
                height: 100px;
                background-color: #1E6D8D;
                color: white;
                position: absolute;
                left: 60px;
                top: 30px;
            }

---

 

 

 

 

 

总结

在不用JS的情况下，可以用input和lable配合来简单的实现点击显示元素的效果。默认显示的元素可以在input加checked来显示。显示的元素可以用position来定位元素的位置，前提不能覆盖点击的元素，否则点击元素会被覆盖，导致不能再点击。