用js写一个选项卡

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" /> 
<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[i].onclick = function(){
           for(var i=0; i<op.length; i++){
               oli[i].className = " ";
               op[i].style.display = "none";
           }
           this.className="active"; 
           op[this.index].style.display = "block";
       }
      }
   }
</script>
</body>
</html>

秒客网

用js写一个选项卡

相关文章