纯CSS H5选项卡
<style>.wrap{ margin: auto; width: fit-content; height: fit-content; display:flex; flex-direction: column; font: normal 1em sans-serif; }
.wrap h1{ margin: auto; font-size:2em; }
.wrap input { 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; }
#rad1:checked ~ .menu #menu1,
#rad2:checked ~ .menu #menu2,
#rad3:checked ~ .menu #menu3 { border: 1px solid; border-bottom: none; background: #fff; }
#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>HTML 中的 label 标签可以通过 for="id名称" 与指定 id 标识的 input 标签建立映射关系，若此，通过点击 label 标签可以触发 input 标签的相关事件。通常，label 标签总是和 input 标签连在一起使用，例如一个文本标签：<br><br><<span style='color:darkred'>label</span> <span style='color: red'>for</span><span style='color: blue'>=</span><span style='color: magenta'>"txtbox"</span>>请输入 : <<span style='color: darkred'>/label</span>><<span style='color:darkred'>input</span> <span style='color: red'>type</span><span style='color: blue'>=</span><span style='color: magenta'>"text"</span> <span style='color: red'>id</span><span style='color: blue'>=</span><span style='color: magenta'>"txtbox"</span> /><br><br>效果是酱紫：<br><br><label for="txtbox">请输入: </label><input type="text" id="txtbox" /><br><br></p>
<p>“请输入”字样处就是 label 标签，它已经与其右边的文本框建立了映射关系，具备文本框的默认单击事件，亦即，单击它和单击文本框都能使得文本框获得焦点。</p>
<p>而 type="radio" 的 input 单选按钮，当 name 属性相同时，只允许有一个处于选中状态，利用这一特性，通过定义单选按钮被选中时其它元素的样式，比如可见或不可见，CSS中可以使用关键字 ~ 来指定受影响的元素的样式，这就可以实现选项卡的效果。</p>
<p>radio的外观做标签不合适，所以设置其不可见，然后拐弯抹角，用上了和它有亲戚关系的 label 标签替代它走上前台。label 标签没有多少属性可以设置，但也不是很穷，边距、边框、背景色等等还是有的。</p>
</div>
<div class="conts" id="cont2">
<p>本例提供了三页标签，可以增删。操作时需要在几个地方一一动刀：</p>
<p>一、CSS<br><br>① 菜单关联<br><br>删掉 <span style='color: red;'>#<span style='color: blue;'>rad3</span>:checked ~ .menu #menu4</span><br>或增加 <span style='color: red;'>#<span style='color: blue;'>rad4</span>:checked ~ .menu #menu4</span><br><br>② 内容关联</p>
<p>二、HTML<br><br>① input标签<br><br> 删除 <<span style='color:darkred'>input</span> <span style='color: red'>id</span><span style='color: blue'>=</span><span style='color: magenta'>"rad3"</span> <span style='color: red'>name</span><span style='color: blue'>=</span><span style='color: magenta'>"group"</span> <span style='color: red'>type</span><span style='color: blue'>=</span><span style='color: magenta'>"radio"</span> /><br>或增加 <<span style='color:darkred'>input</span> <span style='color: red'>id</span><span style='color: blue'>=</span><span style='color: magenta'>"rad4"</span> <span style='color: red'>name</span><span style='color: blue'>=</span><span style='color: magenta'>"group"</span> <span style='color: red'>type</span><span style='color: blue'>=</span><span style='color: magenta'>"radio"</span> /><br><br>② label标签<br><br> 删除 <<span style='color:darkred'>label</span> <span style='color: red'>id</span><span style='color: blue'>=</span><span style='color: magenta'>"menu3"</span> <span style='color: red'>for</span><span style='color: blue'>=</span><span style='color: magenta'>"rad3"</span>>项目三<<span style='color: darkred'>/label</span>><br>或添加 <<span style='color:darkred'>label</span> <span style='color: red'>id</span><span style='color: blue'>=</span><span style='color: magenta'>"menu4"</span> <span style='color: red'>for</span><span style='color: blue'>=</span><span style='color: magenta'>"rad4"</span>>项目四<<span style='color: darkred'>/label</span>></p>
</div>
<div class="conts" id="cont3">
<p>③ 内容<br><br>删除<br><br> <<span style='color:darkred'>div</span> <span style='color: red'>class</span><span style='color: blue'>=</span><span style='color: magenta'>"conts"</span> <span style='color: red'>id</span><span style='color: blue'>=</span><span style='color: magenta'>"cont3"</span>><br> <<span style='color:darkred'>p</span>>内容三<<span style='color: darkred'>/p</span>><br> <<span style='color: darkred'>/div</span>><br><br>或增加<br><br> <<span style='color:darkred'>div</span> <span style='color: red'>class</span><span style='color: blue'>=</span><span style='color: magenta'>"conts"</span> <span style='color: red'>id</span><span style='color: blue'>=</span><span style='color: magenta'>"cont4"</span>><br> <<span style='color:darkred'>p</span>>内容四<<span style='color: darkred'>/p</span>><br> <<span style='color: darkred'>/div</span>></p>
</div>
</div>
</div>
完整代码：
<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 { 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>
还可以这样玩，利用radio选项按钮跟所要的内容关联。黑黑厉害{:4_187:} 红影 发表于 2022-6-15 20:52
还可以这样玩，利用radio选项按钮跟所要的内容关联。黑黑厉害
这个功能过去在某个项目也有用到，不过当时是适配另外的场景，没有通用性，虽然原理一样 明天来学习。 等看你几个徒弟们做的效果{:4_174:} 樵歌 发表于 2022-6-16 06:53
等看你几个徒弟们做的效果
有需要的一般都可以做 哈哈，天文数码，学不会{:4_173:} 继续来学习 马黑黑 发表于 2022-6-15 21:39
这个功能过去在某个项目也有用到，不过当时是适配另外的场景，没有通用性，虽然原理一样
现在被黑黑单独拿出来，做折叠选项卡了吧{:4_204:} 红影 发表于 2022-6-16 15:29
现在被黑黑单独拿出来，做折叠选项卡了吧
挺好的 马黑黑 发表于 2022-6-16 19:01
挺好的
是的，非常好{:4_204:} 红影 发表于 2022-6-16 20:49
是的，非常好
能用就好 马黑黑 发表于 2022-6-16 07:33
有需要的一般都可以做
我觉得你几个徒弟做的，各有特色，有的上手快，有的意境好，有的鲜明漂亮。{:4_189:} 樵歌 发表于 2022-6-17 06:16
我觉得你几个徒弟做的，各有特色，有的上手快，有的意境好，有的鲜明漂亮。
你总结到位，是做领导的料 马黑黑 发表于 2022-6-17 07:36
你总结到位，是做领导的料
嘿嘿，夸奖过关啦{:4_189:} 樵歌 发表于 2022-6-18 07:50
嘿嘿，夸奖过关啦
加十分
页:
[1]