JS+CSS：H5选项卡

马黑黑 · 发表于 2022-6-15 12:51

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

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

x

本帖最后由马黑黑于 2022-6-15 12:56 编辑

h5选项卡

HTML没有原生的选项卡，而选项卡是web的刚需，因此需要自己制作。选项卡其实就是多标签，在同一页内可以自由切换，增大信息量的同时方便浏览。实现方式主要是以下这两种：纯CSS、CSS+JS。

本例为原创h5选项卡，使用JS+CSS实现，内部结构由div构造。未做过兼容性测试，不过即使存在兼容性问题，理论上它依然可以正常运行，仅是好看与否而已。

附一：HTML结构
		
<div class="wrap">
   <h1>h5选项卡</h1>
   <div class="menu">
      <div class="item">项目一</div>
      <div class="item noborder">项目二</div>
   </div>
   <div class="contents">
      <div class="conts">内容一</div>
      <div class="conts noconts">内容二</div>
   </div>
</div>

使用时，需要增设项目和内容的，按“项目二”和“内容二”的格式分别在其下复制相同代码即可，项目与内容量需保持一致，内容与菜单需保持对应关系。

附二：CSS代码

.wrap { margin: auto; width: fit-content; height: fit-content; display: flex; flex-direction: column; font: normal 1em / 1.4em sans-serif; }
.wrap h1 { margin: 0 auto; padding: 4px; font: 900 2em sans-serif; }
.menu { margin: 0 0 -1px 6px; width: fit-content; height: fit-content; display: flex; gap: 4px; position: relative; }
.item { width: 60px; height: 30px; background: #fff; border: 1px solid; border-bottom: none; font: normal 14px / 30px sans-serif; color: black; text-align: center; cursor: pointer; }
.noborder { border: none; background: none; }
.contents { width: 600px; height: 420px; border: 1px solid; background: #fff; box-shadow: 0 2px 10px #000; padding: 10px; }
.conts { width: 100%; height: 100%; }
.noconts { display: none; }

【注】项目名称偏长时请修改 .item 的 width 值。

附三：JS代码

let items = document.querySelectorAll('.item'),
   conts = document.querySelectorAll('.conts');
let currentKey = 0;

Array.from(items).forEach((item,key) => {
   item.onclick = () => {
      currentKey = key;
      setTab();
   }
})

let setTab = () => {
   Array.from(items).forEach((item,key) => {
      item.className = key == currentKey ? 'item' : 'item noborder';
      conts[key].style.display = key == currentKey ? 'block' : 'none';
   })
}

【注】封装好的JS代码功能为选项卡切换，它能自动识别HTML中的项目与内容。

马黑黑 · 发表于 2022-6-15 12:55

为方便复制，再给出范例的完整代码：

<style>
.wrap { margin: auto; width: fit-content; height: fit-content; display: flex; flex-direction: column; font: normal 1em / 1.4em sans-serif; }
.wrap h1 { margin: 0 auto; padding: 4px; font: 900 2em sans-serif; }
.menu { margin: 0 0 -1px 6px; width: fit-content; height: fit-content; display: flex; gap: 4px; position: relative; }
.item { width: 60px; height: 30px; background: #fff; border: 1px solid; border-bottom: none; font: normal 14px / 30px sans-serif; color: black; text-align: center; cursor: pointer; }
.noborder { border: none; background: none; }
.contents { width: 600px; height: 420px; border: 1px solid; background: #fff; box-shadow: 0 2px 10px #000; padding: 10px; }
.conts { width: 100%; height: 100%; }
.noconts { display: none; }
</style>
<div class="wrap">
<h1>h5选项卡</h1>
<div class="menu">
<div class="item">项目一</div>
<div class="item noborder">项目二</div>
</div>
<div class="contents">
<div class="conts">内容一</div>
<div class="conts noconts">内容二</div>
</div>
</div>
<script>
let items = document.querySelectorAll('.item'), conts = document.querySelectorAll('.conts');
let currentKey = 0;
Array.from(items).forEach((item,key) => {
item.onclick = () => {
currentKey = key;
setTab();
}
})
let setTab = () => {
Array.from(items).forEach((item,key) => {
item.className = key == currentKey ? 'item' : 'item noborder';
conts[key].style.display = key == currentKey ? 'block' : 'none';
})
}
</script>