2021-06-24 css选项卡的实现

实现效果

鼠标移动到每个选项上时,对应选项栏变色,内容栏显示相应的内容

思路

1.内容栏的子标签默认设置隐藏(默认只显示第一个)
2.在for循环中设置鼠标移动事件,目的是移动到哪一个选项li就得到对应的索引值:用闭包解决异步问题
3.移动进入选项li,在子循环中,当前索引的内容取消隐藏,其余索引的内容保持隐藏

代码

html

<div class="box">
    <ul>
        <li>首页</li>
        <li>友情链接</li>
        <li>加入我们</li>
        <li>联系我们</li>
    </ul>
    <div class="cont">
        <p>我是首页内容</p>
        <p>我是友情链接</p>
        <p>我是加入我们</p>
        <p>我是联系我们</p>
    </div>
</div>

css

* {
   margin: 0;padding: 0;}
.box {
   width: 405px;height: 330px;margin: 0 auto;}
li {
   list-style-type: none;width: 99px;height: 30px;background: turquoise;text-align: center;line-height: 30px