能实现的功能不多,假如能满足需要,使用这个方法是最简单的。
- 准备一下 HTML
- 准备css
.tab{
width: 800px;
height: 600px;
position: relative;
margin: 0 auto;
background: #f7f7f7;
}
.content:first-of-type{
display: block;
z-index: 1;
}
.one:hover ~ .content:nth-of-type(1),
.two:hover ~ .content:nth-of-type(2),
.three:hover ~ .content:nth-of-type(3),
.four:hover ~ .content:nth-of-type(4)
{
display: block;
z-index: 9;
background: #f7f7f7;
}
.one ~ .content:nth-of-type(1):hover,
.two ~ .content:nth-of-type(2):hover,
.three ~ .content:nth-of-type(3):hover,
.four ~ .content:nth-of-type(4):hover{
display: block;
z-index: 9;
}
width: 100px;
height: 30px;
line-height: 30px;
display: block;
text-align: center;
float: left;
background: #f5f5f5;
cursor: pointer;
}
.content{
position: absolute;
top: 30px;
left: 0;
right: 0;
bottom: 0;
display: none;
}
css 借助 input 来实现选项卡
当我们为label,配置了for的时候,只要我们点击 label 就可以选中input。
大家可以随便新建一个html,试一下上面的代码,然后改掉for,看看点击label还能不能成功。
- 言归正传,我们开始准备HTML
<article class="tabs">
<input checked id="one" name="tabs" type="radio">
<label for="one">选项卡1</label>
<input id="two" name="tabs" type="radio" value="Two">
<label for="two">选项卡2</label>
<input id="three" name="tabs" type="radio">
<label for="three">选项卡3</label>
<label for="four">选项卡4</label>
<div class="panels">
<div class="panel">
<p>明月何皎皎,照我罗床帏。 忧愁不能寐,揽衣起徘徊。 客行虽云乐,不如早旋归。 出户独彷徨,愁思当告谁! 引领还入房,泪下沾裳衣。
</p>
</div>
<div class="panel">
<h2>短歌行</h2>
<p>
对酒当歌,人生几何!譬如朝露,去日苦多。 慨当以慷,忧思难忘。何以解忧?唯有杜康。 青青子衿,悠悠我心。但为君故,沉吟至今。 呦呦鹿鸣,食野之苹。我有嘉宾,鼓瑟吹笙。 明明如月,何时可掇?忧从中来,不可断绝。 越陌度阡,枉用相存。契阔谈讌,心念旧恩。(谈讌
一作:谈宴) 月明星稀,乌鹊南飞。绕树三匝,何枝可依? 山不厌高,海不厌深。周公吐哺,天下归心。(海 一作:水)
</p>
</div>
<div class="panel">
<h2>七哀诗三首·其一</h2>
<p>
西京乱无象,豺虎方遘患。 复弃中国去,委身适荆蛮。 亲戚对我悲,朋友相追攀。 出门无所见,白骨蔽平原。 路有饥妇人,抱子弃草间。 顾闻号泣声,挥涕独不还。 “未知身死处,何能两相完?” 驱马弃之去,不忍听此言。 南登霸陵岸,回首望长安, 悟彼下泉人,喟然伤心肝。
</p>
</div>
<div class="panel">
<h2>入若耶溪</h2>
<p>艅艎何泛泛,空水共悠悠。 阴霞生远岫,阳景逐回流。 蝉噪林逾静,鸟鸣山更幽。 此地动归念,长年悲倦游。
</p>
</div>
</div>
</article>
2.准备 CSS 结构
1.准备html结构
<div class="tabs">
<div class="menus">
<button class="menu">One</button>
<button class="menu">Two</button>
<button class="menu">Three</button>
<button class="menu">Four</button>
</div>
<div class="panels">
<div class="panel">
<h1>山有木兮木有枝,心悦君兮君不知。</h1>
</div>
<div class="panel">2</div>
<div class="panel">3</div>
<div class="panel">4</div>
</div>
</div>
2.加上css
这里我们需要通过Array.from
将 NodeList 转化为 Array 类型。