纯CSS H5选项卡

马黑黑 · 发表于 2022-6-15 20:36

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

纯CSSh5选项卡

HTML 中的 label 标签可以通过 for="id名称" 与指定 id 标识的 input 标签建立映射关系，若此，通过点击 label 标签可以触发 input 标签的相关事件。通常，label 标签总是和 input 标签连在一起使用，例如一个文本标签：

<label for="txtbox">请输入 : </label><input type="text" id="txtbox" />

效果是酱紫：

请输入:

“请输入”字样处就是 label 标签，它已经与其右边的文本框建立了映射关系，具备文本框的默认单击事件，亦即，单击它和单击文本框都能使得文本框获得焦点。

而 type="radio" 的 input 单选按钮，当 name 属性相同时，只允许有一个处于选中状态，利用这一特性，通过定义单选按钮被选中时其它元素的样式，比如可见或不可见，CSS中可以使用关键字 ~ 来指定受影响的元素的样式，这就可以实现选项卡的效果。

radio的外观做标签不合适，所以设置其不可见，然后拐弯抹角，用上了和它有亲戚关系的 label 标签替代它走上前台。label 标签没有多少属性可以设置，但也不是很穷，边距、边框、背景色等等还是有的。

本例提供了三页标签，可以增删。操作时需要在几个地方一一动刀：

一、CSS

① 菜单关联

删掉 #rad3:checked ~ .menu #menu4
或增加 #rad4:checked ~ .menu #menu4

② 内容关联

二、HTML

① input标签

删除 <input id="rad3" name="group" type="radio" />
或增加 <input id="rad4" name="group" type="radio" />

② label标签

删除 <label id="menu3" for="rad3">项目三</label>
或添加 <label id="menu4" for="rad4">项目四</label>

③ 内容

删除

   <div class="conts" id="cont3">
      <p>内容三</p>
   </div>

或增加

   <div class="conts" id="cont4">
      <p>内容四</p>
   </div>

马黑黑 · 发表于 2022-6-15 20:38

完整代码：

<style>
/* 父盒子 */
.wrap{ margin: auto; width: fit-content; height: fit-content; display:flex; flex-direction: column; font: normal 1em sans-serif; }
/* h1标题样式 */
.wrap h1{ margin: auto; font-size:2em; }
/* radio选项按钮用于与菜单、内容建立关联*/
.wrap input[type='radio'] { display: none; }
/* 项目菜单父盒子 */
.menu { margin: 20px 0 5px 6px; width: fit-content; height: fit-content; position: relative; }
/* 菜单样式 */
.menu label{ padding: 6px 10px; cursor: pointer; }
/* 内容父盒子 */
.contents{ padding: 20px; width: 600px; min-height: 400px; background: #fff; border: 1px solid; box-shadow: 0 2px 10px #000; }
/* 内容盒子 */
.conts{ display: none; }
/* radio选项按钮与菜单关联 */
#rad1:checked ~ .menu #menu1,
#rad2:checked ~ .menu #menu2,
#rad3:checked ~ .menu #menu3 { border: 1px solid; border-bottom: none; background: #fff; }
/* radio选项按钮与内容关联 */
#rad1:checked ~ .contents #cont1,
#rad2:checked ~ .contents #cont2,
#rad3:checked ~ .contents #cont3 { display: block; }
</style>
<div class="wrap">
<h1>纯CSSh5选项卡</h1>
<input id="rad1" name="group" type="radio" checked />
<input id="rad2" name="group" type="radio" />
<input id="rad3" name="group" type="radio" />
<div class="menu">
<label id="menu1" for="rad1">项目一</label>
<label id="menu2" for="rad2">项目二</label>
<label id="menu3" for="rad3">项目三</label>
</div>
<div class="contents">
<div class="conts" id="cont1">
<p>内容一</p>
</div>
<div class="conts" id="cont2">
<p>内容二</p>
</div>
<div class="conts" id="cont3">
<p>内容三</p>
</div>
</div>
</div>