直接先来个真相吧：

【HTML代码】

div id='菜单！标签标题-ul id=' nav ' lia href=' # ' class=' selected ' tab 1/a/Li lia href=' # ' class=' tab 2/a/Li lia href=' # ' class=' tab 3/a/Li div style='清除： both '/div/ul！-二级菜单-div id=' menu _ con ' div class=' tag ' style=' display : block '这是拉环切换效果区域1/div div class=' tag ' style=' display : none '这是拉环切换效果区域2/div class=' tag ' style=' display : none '这是拉环切换效果区域3 /div /div/div【js】

/** *标签* @作者橡树小屋*/var tab=function(){ function标记(name，elem){ return(elem | | document)} .getElementsByTagName(名称);} //获得相应身份的元素函数id(名称){返回document.getElementById(名称);}函数优先(elem){ elem=elem。第一个孩子；return elemelem.nodeType==1？elem : next(elem)；}函数next(elem){ do { elem=elem。下一个兄弟姐妹；}while(elemelem.nodeType！=1)返回elem}返回{ set:function(elemId，tabId){ var elem=tag('li '，id(ElEMid))；var tab=tag(' div '，id(taBid))；var listNum=elem . length var tabNum=tab . length for(var I=0；ilistNumi ){ elem[i].onclick=(函数(I){ return function(){ for(var j=0；jtabNumj){ if(I==j){ tab[j]。风格。display=' block//alert(elem[j]).第一个孩子)；elem[j]。第一个孩子。类名=“选定”；} else { tab[j]。风格。显示='无'；elem[j]。第一个孩子。类名=' '；} } } })(I)} } } } } })；窗户。onload=function(){ tab。set(' nav '，' menu _ con ')；}【CSS】

正文{背景： # FFF；} a { color: # 585858 } #菜单{ width:360px}/* -导航样式-*/#菜单# nav {显示：块；宽度：100%;划水：0;margin:0list列表式：无；背景：url(./images/BG。gif)} #菜单# nav Li {左浮动：宽度宽度：120px} #菜单#导航阿利{显示：块线高：27 px文本装饰：无；padding:0 0 0 5px文本-对齐：中心} /* -列表标题样式-*/# menu _ con { width :358 px；高度：135pxborder:1px固体# BF9660border-top:none} .选定的{background:url(./images/tag _ BG。gif)；}.清除{ clear:both}调用方法：

选项卡。set(' nav '，' menu _ con ')；

代码下载点击这里

这个实例只是简单实现了点击切换的效果，还有许多功能可以添加，大家一起动手实践一下吧。