ES6面向对象动态添加标签页

最新推荐文章于 2022-09-17 22:39:54 发布

chalkbox

最新推荐文章于 2022-09-17 22:39:54 发布

阅读量757

点赞数 1

分类专栏： HTML 前端前端#HTML#JS 文章标签： HTML JS ES6

本文链接：https://blog.csdn.net/chalkbox/article/details/103537404

版权

本文介绍如何利用ES6的面向对象特性，动态创建和管理标签页。通过点击标题，实现内容的切换。包括HTML布局、CSS样式和JavaScript逻辑的详细实现。

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

ES6面向对象动态添加标签页

应用：点击标题改变内容

HTML代码段：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>ES6</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <main>
        <h4>
            ES6面向对象 动态添加标签页
        </h4>
        <div class="tabsbox" id="tab">
            <nav class="firstnav">
            <ul>
                <li class="liactive"><span>标签1</span><span class="iconfont"><img src="https://mychalk.oss-cn-hangzhou.aliyuncs.com/images/cc.png" /></span></li>
                <li><span>标签2</span><span class="iconfont"><img src="https://mychalk.oss-cn-hangzhou.aliyuncs.com/images/cc.png" /></span></li>
                <li><span>标签3</span><span class="iconfont"><img src="https://mychalk.oss-cn-hangzhou.aliyuncs.com/images/cc.png" /></span></li>
            </ul>