『前端学习实例』标签页实现（Javascript + CSS）

最新推荐文章于 2024-10-15 16:43:29 发布

原创

最新推荐文章于 2024-10-15 16:43:29 发布 · 976 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css

本文通过JavaScript和CSS实现动态标签页功能。点击按钮可切换显示不同文本内容，利用JSDOM实现切换效果，CSS负责样式呈现。提供源代码供参考。

参考文档：JavaScript 教程 W3school

参考文档：CSS 教程 W3school

文章目录

功能需求
结果展示
源代码
- 文件目录
- index.html

功能需求

实现动态标签页，包含一系列按钮和文本。

切换功能：点击按钮可以切换到相应文本。（切换效果使用JSDOM，效果内容使用CSS）

结果展示

默认状态：
点击按钮（P2）：
点击按钮（P1）：同默认状态。

源代码

文件目录

index.html 网页源代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签页</title>
</head>
<body>


<!--第一部分：CSS-->
<style>
  .mycontainer{
   
    /*全局容器*/
    width: 250px;
    height: 150px;
    margin: 50px;
    border-color: #9acfea;
    border-style: dotted;
  }
  .mycontainer ul{
   
   
    list-style: none; /*取消列表项显示*/
  }
  .mycontainer li{
   
   
    float: left; /*列表项从左浮动*/