JavaScript实现tab栏

以你之姓@ 2022-05-28 07:58 193阅读 0赞

#### HTML ####

<div id="box">
            <ul class="clearfix">
                <li class="current">北京邮电</li>
                <li>南京邮电</li>
                <li>重庆邮电</li>
                <li>西安邮电</li>
            </ul>
            <span class="show">北京邮电大学</span>
            <span>南京邮电大学</span>
            <span>重庆邮电大学</span>
            <span>西安邮电大学</span>
        </div>

#### CSS ####

*{ margin: 0; padding: 0; }
            .clearfix:before,
            .clearfix:after{ content: ""; display: block; }
            .clearfix:after{ clear: both; }
            #box{ width: 400px; height: 300px; margin: 100px auto; overflow: hidden; border: 1px solid #369; }
            ul li{ width: 100px; float: left; text-align: center; cursor: pointer; list-style: none; height: 40px; line-height: 40px; background: #ccc; }
            span{ display: none; height: 260px; background: #369; text-align: center; font-size: 30px; font-weight: bold; line-height: 260px; }
            .current{ background: #369; border-bottom: 3px solid red; }
            .show{ display: block; }

#### js代码 ####

![这里写图片描述][70]

[70]: /images/20220528/64473e41d746453aa7cc3b2b2d3bef08.png