代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/css/animate.min.css" />
<title>Document</title>
<style>
body {
background-color: #7cb342;
}
.content {
width: 750px;
height: 400px;
background-color: #03a9f4;
margin: 250px auto;
border-radius: 15px;
}
.nav {
display: flex;
}
.nav > div {
width: 33.33%;
text-align: center;
height: 50px;
line-height: 50px;
background-color: #7cb342;
font-size: 1.2rem;
cursor: pointer;
}
.nav .active {
background-color: #03a9f4;
color: white;
border-radius: 15px;
}
.item {
background-color: #00897b;
width: 90%;
height: 300px;
margin: 26px auto;
border-radius: 15px;
}
.item > div {
display: none;
color: white;
padding: 50px 10px;
}
</style>
</head>
<body>
<div id="demp">
<div class="content animate__animated animate__swing">
<div class="nav">
<div class="active">Vue</div>
<div>AngularJS</div>
<div>react</div>
</div>
<div class="item">
<div style="display: block">
Vue (读音 /vjuː/，类似于 view)
是一套用于构建用户界面的渐进式JavaScript框架。 [5]
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue
的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue
也完全能够为复杂的单页应用（SPA）提供驱动。 [1]
</div>
<div>
AngularJS诞生于2009年，由Misko Hevery
等人创建，是一款构建用户界面的前端框架，后为Google所收购。 [3]
AngularJS是一个应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用，通过新的属性和表达式扩展了
HTML，实现一套框架，多种平台，移动端和桌面端。 [4-5]
AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
[3]
</div>
<div>
React是用于构建用户界面的JavaScript库， [2]
起源于Facebook的内部项目，因为该公司对市场上所有 JavaScript
MVC框架，都不满意，就决定自己写一套，用来架设Instagram的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
</div>
</div>
</div>
</div>
<script>
let nav = document.querySelectorAll(".nav>div");
let item = document.querySelectorAll(".item>div");
for (let i = 0; i < nav.length; i++) {
nav[i].index = i;
nav[i].onclick = function () {
for (var j = 0; j < item.length; j++) {
nav[j].className = "";
item[j].style.display = "none";
}
this.className = "active";
item[nav[i].index].style.display = "block";
};
}
</script>
</body>
</html>
效果如下:
