1、新建html文档。
2、书写hmtl代码。<div id="menu"><ul id="nav"> <li><a href="#" class="selected">jQuery特效</a></li> <li><a href="#" class="">tab切换</a></li> <li><a href="#" class="">菜单导航</a></li></ul><div id="menu_con"> <div class="tag" style="display:block"> 这里是jQuery特效内容列表 </div> <div class="tag" style="display:none"> 这里是tab切换效果 </div> <div class="tag" style="display:none"> 这里是菜单导航效果 </div></div></div>
3、书写css代码。<style>* { margin: 0; padding: 0; list-style: none; }body { font-size: 12px; }#menu { width: 360px; overflow: hidden; margin: 100px auto; border: 1px solid #BF9660; }#menu #nav { display: block; width: 100%; padding: 0; margin: 0; list-style: none; }#menu #nav li { float: left; width: 120px; }#menu #nav li a { display: block; line-height: 27px; text-decoration: none; padding: 0 0 0 5px; text-align: center; color: #333; }#menu_con { width: 358px; height: 135px; border-top: none }.tag { padding: 10px; overflow: hidden; }.selected { background: #C5A069; color: #fff; }</style>
4、书写并添加js代码。<script>var tabs=function(){ function tag(name,elem){ return (elem||document).getElementsByTagName(name); } function id(name){ return document.getElementById(name); } function first(elem){ elem=elem.firstChild; return elem&&elem.nodeType==1? elem:next(elem); } function next(elem){ do{ elem=elem.nextSibling; }while( elem&&elem.nodeType!=1 ) return elem; } return { set:function(elemId,tabId){ var elem=tag("li",id(elemId)); var tabs=tag("div",id(tabId)); var listNum=elem.length; var tabNum=tabs.length; for(var i=0;i<listNum;i++){ elem[i].onclick=(function(i){ return function(){ for(var j=0;j<tabNum;j++){ if(i==j){ tabs[j].style.display="block"; elem[j].firstChild.className="selected"; } else{ tabs[j].style.display="none"; elem[j].firstChild.className=""; } } } })(i) } } }}();tabs.set("nav","menu_con");</script>
5、代码整体结构。
6、查看效果。
