tab菜单最实用的例子
来源：互联网 发布：mysql安装教程视频 编辑：程序博客网 时间：2024/06/08 16:16
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style type="text/css">#tab{width:100%;height:200px;}#tabTitle{width:100%;height:25px;line-height:25px;}#tabTitle .tabTitleCurrent{border:2px solid #888;background:#888;}#tabTitle h3{margin:0;padding:0;width:80px;background:#ccc;float:left;line-height:25px;text-align:center;border:2px solid white;font-size:12px;color:white;}#tabContent{width:100%;height:175px;background:#888;color:white;}#tabContent div{display:none;}#tabContent .tabContentCurrent{display:block;}#tabContent .tabContentCurrent ul{margin-top:2px;padding:5px;list-style:none;}</style><script type="text/javascript">function tabShow(num){var h3os=document.getElementsByTagName("h3");var cdivs=document.getElementById("tabContent").getElementsByTagName("div");for(i=0;i<h3os.length;i++){if(i==num){h3os[i].className="tabTitleCurrent";cdivs[i].className="tabContentCurrent";}else{h3os[i].className="";cdivs[i].className="";}}}</script></head><body><div id="tab"><div id="tabTitle"> <h3 class="tabTitleCurrent" onMouseOver="tabShow('0');">第一项</h3> <h3 onMouseOver="tabShow('1');">第二项</h3> <h3 onMouseOver="tabShow('2');">第三项</h3> </div> <div id="tabContent"> <div class="tabContentCurrent"> <ul> <li>aaaaa</li> <li>aaaaa</li> <li>aaaaa</li> <li>aaaaa</li> <li>aaaaa</li> <li>aaaaa</li> <li>aaaaa</li> </ul> </div> <div> <ul> <li>bbbbb</li> <li>bbbbb</li> <li>bbbbb</li> <li>bbbbb</li> <li>bbbbb</li> <li>bbbbb</li> <li>bbbbb</li> </ul> </div> <div> <ul> <li>ccccccc</li> <li>ccccccc</li> <li>ccccccc</li> <li>ccccccc</li> <li>ccccccc</li> <li>ccccccc</li> <li>ccccccc</li> </ul> </div> </div></div></body></html>
