简单实现label控制div的展示与隐藏

最新推荐文章于 2023-02-06 11:04:58 发布

原创最新推荐文章于 2023-02-06 11:04:58 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #javascript #css3

HTML 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何通过CSS和HTML的label及checkbox元素，实现不依赖JavaScript来控制局部div的隐藏与显示。核心原理是利用CSS的`:checked`伪类选择器，当checkbox被选中时，通过`~`兄弟选择器改变关联div的`display`属性，从而达到显示或隐藏的效果。这种方法适用于需要简单控制元素显示状态的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

经常会用到局部div的隐藏与展示，但是很多时候不方便用JS来控制，那就用CSS来进行控制会比较合适一点。所以就可以已用label绑定checkbox，再由checkbox的状态来控制div的display属性的方法来实现。

代码

原理很简单，在需要隐藏和展示的div中定义隐藏和checkbox选中状态隐藏

css

.nav_mNav{display: none;}
#navController:checked~.nav_mNav{display: block;}

html

利用label的for属性绑定checkbox

<input type="checkbox" id="navController" name="navController" hidden>
<label for="navController">菜单</label>


<div class="nav_mNav">
    <div class="nav_mItem"><a href="#">菜单1</a></div>
    <div class="nav_mItem"><a href="#">菜单2</a></div>
    <div class="nav_mItem"><a href="#">菜单3</a></div>
    <div class="nav_mItem"><a href="#">菜单4</a></div>
    <div class="nav_mItem"><a href="#">菜单5</a></div>
  </div>