参考文档:CSS 教程 W3school
文章目录
功能需求
- 实现动态标签页,包含一系列按钮和文本。
- 切换功能:点击按钮可以切换到相应文本。(切换效果使用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; /*取消列表项显示*/
}
.mycontai