WEB第五次作业

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选项卡效果</title>
<style>
*{margin: 0; padding: 0; box-sizing: border-box;}
 html, body{height: 100%;width: 100%;}
 html{font-size: 10px;}
 .tab{
 width:40rem;
 height:30rem;
 border:solid 1px #000;
 }
 .tab-title{
 width:100%;
 height:5rem;
 background-color:antiquewhite;
 border-bottom: solid 2px black;
 display:flex;
 justify-content: space-between;
 align-items: center;
 }
 .tt{
 flex: 1;
 height:5rem;
 background-color: #fff;
 font-size: 1.8rem;
 text-align:center;
 line-height: 5rem;
 }
 .tt.active,
 .tt:hover{
 background-color: black;
 color:white;
 }
 .tab-content{
 width: 100%;
 height:calc(100% - 5rem);
 background-color:aquamarine;
 position: relative;
 }
 .tc{
 width:100%;
 height: 100%;
 font-size: 1.8rem;
 text-align:center;
 color:white;
 position: absolute;
 display:none;
 }
 .tc.active{
 display:block;
 }
 .tc:nth-of-type(1) {
 background-color:blue;
 }
 .tc:nth-of-type(2) {
 background-color:pink;
 }
 .tc:nth-of-type(3) {
 background-color:orange;
 }
 </style>
 </head>
 <body>
 <div class="tab">
 <div class="tab-title">
 <div class="tt active">标题1</div>
 <div class="tt">标题2</div>
 <div class="tt">标题3</div>
 </div>
 <div class="tab-content">
 <div class="tc active">内容部分1</div>
 <div class="tc">内容部分2</div>
 <div class="tc">内容部分3</div>
 </div>
 </div>
 <script>
 let tts = document.getElementsByClassName("tt")
 for (let i = 0; i < tts.length; i++) {
 tts[i].onmouseenter = function() {
 for (let j = 0; j < tts.length; j++) {
 tts[j].classList = "tt";
 }
 this.classList = "tt active";
 let tcs = document.getElementsByClassName("tc");
 for (let x = 0; x < tcs.length; x++) {
 tcs[x].classList = "tc";
 }
 tcs[i].classList = "tc active";
 let tabContent = document.querySelector('.tab-content');
 tabContent.classList.add('active');
 };
 tts[i].onmouseleave = function() {
 let tabContent = document.querySelector('.tab-content');
 tabContent.classList.remove('active');
 };
 }
</script>
</body>
</html>
WEB第五次作业

推荐阅读更多精彩内容
