在网上找了很多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>