javaScript选项卡实例

                          在网上找了很多javascript选项卡实例，下面的比较简洁易懂，拿来跟大家分享一下！

                          在body里面加如下代码

                         

<div id=cntr>
<div id=Newstop>
<div id=Newstop_tit>
<p class="toptit">tab实例</p>
<p class="topC0">选项卡1</p>
<p class="topC0">选项卡2</p>
</div>
<div id=Newstop_cnt>
<span title="与P对应千万不要删除"></span>
<span>
 <a href="#">选项卡1的内容</a>
<div align="right"><a href="#" target=_self>更多....</div>
</span>
<span>
 <a href="#">选项卡2的内容</a>
<div align="right"><a href="#" target=_self>更多....</div>
</span>
</div>
<script>
var tags=document.getElementById('Newstop_tit').getElementsByTagName('p');
var tagscnt=document.getElementById('Newstop_cnt').getElementsByTagName('span');
var len=tags.length;
var flag=1; //默认值
for(i=1;i<len;i++)
{
        tags[i].value=i;
        tags[i].οnmοuseοver=function(){changeNav(this.value)};
        tagscnt[i].className='undis';
}
tags[flag].className='topC1';
tagscnt[flag].className='dis';
function changeNav(v){
          tags[flag].className='topC0';
          tagscnt[flag].className='undis';
          flag=v;
          tags[v].className='topC1';
          tagscnt[v].className='dis';
} 
</script>
</div>
</div>

 

                         在head里面添加以下代码

		<style type="text/css">
		
			body{
					padding:0px;
					marging:0px;
					font-size:12px;
					color:black;
					line-height:150%;
					background-color:white;
					text-align:center
			}
			.dis{
					display:block;
			}
			.undis{
					display:none
			}
			#cntr{
					width:302px;
			}
			#Newstop{
					clear:both;
					margin-bottom:16px;
			}
			#Newstop p{
					float:left;
					line-height:21px;
			}
			#Newstop p.topTit{
					font-weight:bold;
					width:117px;
			}
			#Newstop p.topC0{
					background:#dcdcdc;
					border-left:#f2f2f2 1px solid;
					width:40px;
					cursor:pointer;
			}
			#Newstop p.topC1{
					background:#c2130e;
					border-left:#f2f2f2 1px solid;
					width:40px;
					color:#fff;
			}
			#Newstop #Newstop_tit{
					border-bottom:#c2130e 3px solid;
					height:21px;
			}
			#Newstop #Newstop_cnt A{
					color:#666;
					text-decoration:none;
			}
			#Newstop #Newstop_cnt A:hover{
					color:#c2130;
					text-decoration:underline;
			}
		</style>