用js写一个选项卡

时间：2021-01-22 06:25:35
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" /> <!--指定浏览器用IE8及以上的引擎来渲染-->
<style>
.box{
width:300px;
height:300px;
background-color:#eee;
padding:10px;
}
ul{overflow:hidden; padding-left:0;}
ul li{
    list-style:none;
    float:left;
    padding: 10px 15px;
    margin: 0 3px;
    border-top:1px solid #abc;
    border-left:1px solid #abc;
    border-right:1px solid #abc;
}
p{
  margin-top:45px;
  border :1px solid #abcdef;
  padding:10px;
}
.hid{display:none;}

.active{
background-color: #abcdef;
color:white;
border-bottom:3px solid #abcdef;
}
</style>
</head>
<body>
<div class="box">

  <ul>
     <li class="active">html</li>
     <li>css</li>
     <li>javascript</li>
    
     <p>html 是超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。</p>
     <p class="hid">css 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。</p>
     <p class="hid">JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。</p>
  </ul>

</div>
<script>
    window.onload = function(){
    var oli = document.getElementsByTagName("li");
    var op = document.getElementsByTagName("p");
      
      for( var i=0; i<oli.length; i++){
        oli[i].index = i;     <!--设置每个oli的索引值-->
        oli[i].onclick = function(){
            for(var i=0; i<op.length; i++){
                oli[i].className = " ";
                op[i].style.display = "none";
            }
            this.className="active";  <!--this 当前对象oli-->
            op[this.index].style.display = "block";  
        }
      }
    }
</script>
</body>
</html>
标签：

相关文章