javaScript选项卡实例

来源：互联网发布：mac系统写入移动硬盘编辑：程序博客网时间：2024/06/07 09:36

在网上找了很多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].onmouseover=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>