|
|
@@ -0,0 +1,110 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ body{
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ li{
|
|
|
+ list-style: none;
|
|
|
+ }
|
|
|
+ ul{
|
|
|
+ margin:0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .clearfix::after{
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ clear: both;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .box{
|
|
|
+ width: 600px;
|
|
|
+ height: 400px;
|
|
|
+ border:1px solid black;
|
|
|
+ margin:100px auto;
|
|
|
+ }
|
|
|
+ .tab-btn-content{
|
|
|
+ background-color: #111;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .tab-btn-content li{
|
|
|
+ float: left;
|
|
|
+ padding:10px 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active{
|
|
|
+ background-color: #ccc;
|
|
|
+ color: #111;
|
|
|
+ }
|
|
|
+ .info-list{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .info-active{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="box">
|
|
|
+ <div class="tab-btn-content">
|
|
|
+ <ul class="clearfix">
|
|
|
+ <li class="tab-btn active">第一节课</li>
|
|
|
+ <li class="tab-btn">第二节课</li>
|
|
|
+ <li class="tab-btn">第三节课</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="info-content">
|
|
|
+ <div class="info-list info-active">
|
|
|
+ <p>第一节课内容</p>
|
|
|
+ <p>第一节课内容</p>
|
|
|
+ <p>第一节课内容</p>
|
|
|
+ <p>第一节课内容</p>
|
|
|
+ <p>第一节课内容</p>
|
|
|
+ </div>
|
|
|
+ <div class="info-list">
|
|
|
+ <p>第二节课内容</p>
|
|
|
+ <p>第二节课内容</p>
|
|
|
+ <p>第二节课内容</p>
|
|
|
+ <p>第二节课内容</p>
|
|
|
+ <p>第二节课内容</p>
|
|
|
+ </div>
|
|
|
+ <div class="info-list">
|
|
|
+ <p>第三节课内容</p>
|
|
|
+ <p>第三节课内容</p>
|
|
|
+ <p>第三节课内容</p>
|
|
|
+ <p>第三节课内容</p>
|
|
|
+ <p>第三节课内容</p>
|
|
|
+ <p>第三节课内容</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <script>
|
|
|
+ var aTabBtn = document.getElementsByClassName("tab-btn");
|
|
|
+ var aInfoList = document.getElementsByClassName("info-list");
|
|
|
+ for(var i=0;i<aTabBtn.length;i++){
|
|
|
+ aTabBtn[i].index = i
|
|
|
+ aTabBtn[i].onmouseover = function(){
|
|
|
+ // this.setAttribute("class","tab-btn active")
|
|
|
+ // this.className = "tab-btn active";
|
|
|
+
|
|
|
+ // 第一步移除所有按钮的选中状态 去除active类
|
|
|
+ for(var j=0;j<aTabBtn.length;j++){
|
|
|
+ // 移除按钮选中状态
|
|
|
+ aTabBtn[j].classList.remove("active");
|
|
|
+ // 移除内容选中状态
|
|
|
+ aInfoList[j].classList.remove("info-active");
|
|
|
+ }
|
|
|
+ // 第二步给当前按钮添加选中状态
|
|
|
+ this.classList.add("active");
|
|
|
+ // 给当前按钮对应的内容添加选中状态
|
|
|
+ aInfoList[this.index].classList.add("info-active");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
