原生javascript实现的tab选项卡实例代码

原生javascript实现的tab选项卡实例代码:
选项卡效果在网页中有大量的应用,由于jQuery的出现,所以事先选项卡变的更为轻松,相对而言使用原生js实现的就少了很多,下面就介绍一下这样的实例代码,希望能够给需要的朋友带来帮助。
代码如下:

 

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>选项卡效果-蚂蚁部落</title>  
<style type="text/css">  
body  
{  
  font-size:12px;  
  text-align:center;  
  margin:50px;  
  padding:0px;  
}  
.nTab  
{  
  width:542px;  
  margin:0 auto;  
}  
.nTab .TabTitle  
{  
  clear:both;  
  height:26px;  
  overflow:hidden;  
}  
.nTab .TabTitle ul 
{  
  margin:0;  
  padding:0;  
  list-style-type:none;  
  overflow:hidden;  
  background-color:#CCC;  
  width:542px;  
}  
.nTab .TabTitle li 
{  
  float:left;  
  width:60px;  
  height:26px;  
  line-height:26px;  
  cursor:pointer;  
  border-top:1px #c7c7cd solid;  
}  
.nTab .TabTitle .active  
{   
  background:url(mytest/jQuery/bgtab/images/tab_bg1.gif) left -25px no-repeat;  
  border-left:1px #c7c7cd solid;  
}  
.nTab .TabTitle .normal  
{   
  background:url(mytest/jQuery/bgtab/images/tab_bg1.gif);  
}  
.nTab .TabContent  
{  
  width:540px;  
  height:120px;  
  margin:0px auto;  
  padding:10px 0 0 0;  
  border:1px #c7c7cd solid;  
  border-top:none;  
  text-align:center;  
}  
.none{display:none;}  
</style>  
<script type="text/javascript">  
function nTabs(thisObj,Num){  
var tabObj = thisObj.parentNode.id;  
var tabList = document.getElementById(tabObj).getElementsByTagName("li");  
for(i=0; i <tabList.length; i++)  
{  
  if (i == Num)  
  {  
   thisObj.className = "active";   
   document.getElementById(tabObj+"_Content"+i).style.display = "block";  
  }  
  else 
  {  
   tabList[i].className = "normal";   
   document.getElementById(tabObj+"_Content"+i).style.display = "none";  
  }  
}}  
</script>  
</head>  
<body>  
<div>  
  <div class="nTab">  
    <div class="TabTitle">  
      <ul id="myTab0">  
        <li class="active" onclick="nTabs(this,0);">DIV+CSS</li>  
        <li class="normal" onclick="nTabs(this,1);">jQuery教程</li>  
        <li class="normal" onclick="nTabs(this,2);">搜索优化</li>  
        <li class="normal" onclick="nTabs(this,3);">站长交流</li>  
        <li class="normal" onclick="nTabs(this,4);">实例代码</li>  
        <li class="normal" onclick="nTabs(this,5);">意见建议</li>  
      </ul>  
    </div>  
    <div class="TabContent">  
      <div id="myTab0_Content0">DIV+CSS</div>  
      <div id="myTab0_Content1" class="none">jQuery教程</div>  
      <div id="myTab0_Content2" class="none">搜索优化</div>  
      <div id="myTab0_Content3" class="none">站长交流</div>  
      <div id="myTab0_Content4" class="none">实例代码</div>  
      <div id="myTab0_Content5" class="none">意见建议</div>  
    </div>  
  </div>  
</div>  
</body>  
</html>

 

原文地址: 原生javascript实现的tab选项卡实例代码

 

你可能感兴趣的:(JavaScript)