面向对象 tab栏切换案例

最新推荐文章于 2024-03-29 14:06:57 发布

吴机智

最新推荐文章于 2024-03-29 14:06:57 发布

阅读量616

点赞数 1

分类专栏： JS 面向对象案例文章标签： js 面向对象编程

本文链接：https://blog.csdn.net/m0_49893750/article/details/114994715

版权

本文介绍了一个利用JavaScript实现的面向对象的Tab栏切换功能，包括点击切换、添加Tab项、删除Tab项以及双击编辑文字等功能。通过HTML和JS的结合，为用户提供动态交互的界面体验。

摘要由CSDN通过智能技术生成

在这里插入图片描述

功能：

点击 tab栏,可以切换效果.
点击 + 号, 可以添加 tab 项和内容项.
点击 x 号, 可以删除当前的tab项和内容项.
双击tab项文字或者内容项文字,可以修改里面的文字内容.

html部分

<body>
    <main>
        <h4>
            Js 面向对象 动态添加标签页
        </h4>
        <div class="tabsbox" id="tab">
            <!-- tab 标签 -->
            <nav class="fisrstnav">
                <ul>
                    <li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>
                    <li><span>测试2</span><span class="iconfont icon-guanbi"></span></li>
                    <li><span>测试3</span><span class="iconfont icon-guanbi"></span></li>
                </ul>
                <