JavaScript - 选项卡切换、增加、删除、修改【面向对象方法】

Codefreyy

已于 2022-03-29 19:24:57 修改

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：课程案例文章标签： javascript 前端 html css

于 2022-03-28 20:43:16 首次发布

本文链接：https://blog.csdn.net/godfreyyyy/article/details/123805312

本文介绍了一种使用JavaScript面向对象的方法来实现选项卡切换的功能，包括HTML结构、CSS样式以及JavaScript核心代码的实现。通过这段代码，可以动态地增加、删除和修改选项卡，为前端开发提供了一种灵活的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

代码

html

 <h4>羊村成员资料库</h4>
    <div class="tabsbox" id="tab">
        <!-- tab标签 -->
        <div class="firstnav">
            <ul>
                <li class="liactive"><span>喜羊羊</span><span class="iconfont icon-guanbi"></span></li>
                <li><span>懒羊羊</span><span class="iconfont icon-guanbi"></span></li>
                <li><span>美羊羊</span><span class="iconfont icon-guanbi"></span></li>

                <div class="tabadd">
                    <span>+</span>
                </div>
            </ul>
        </div>

        <!-- tab内容 -->
        <div class="tabscon">
            <section class="conactive">我是喜羊羊</section>
            <section>我是懒羊羊</section>
            <section>我是美羊羊</section>
        </div>
    </div>

记得在后面引入js

 <script src="tab.js"></script>

CSS

  <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        li {
            list-style: none;
        }

        h4 {
            text-align: center;
        }

        .tabsbox {
            position: relative;
            height: 500px;
            width: 600px;
            border: 1px solid rgb(218, 18, 85);
            margin: 10px auto;
        }

        .firstnav {

最低0.47元/天解锁文章