-
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content="Create by double 2015-07-09"> <title>jquery实现tab</title> <script src="jquery-1.7.2.js"></script> <style> *{ padding:0; margin:0; } ul{ list-style-type:none; } #ul{ height:30px; margin-bottom:10px; } body{ margin:50px; } #ul li{ height:30pxx; line-height:30px; padding:0 15px; border:1px solid #abcdef; float:left; margin-right:3px; cursor:pointer; } #ul li.current{ background:#abcdef; } #content div{ width:300px; height:200px; border:1px solid #abcdef; display:none; } #content div.show{ display:block; } </style> </head> <body> <ul id="ul"> <li class="current">php</li> <li>java</li> <li>js</li> </ul> <div id="content"> <div class="show">php...介绍</div> <div>java...介绍</div> <div >js...介绍</div> </div> <script> //未使用事件委托 var ul = document.getElementById('ul'); var li = ul.getElementsByTagName('li'); var content = document.getElementById('content'); var div = content.getElementsByTagName('div'); for(var i=0;i<li.length;i++){ li[i].index = i; li[i].onclick=function(){ for(var i=0;i<li.length;i++){ li[i].className = ' '; div[i].style.display='none'; }; this.className='current'; div[this.index].style.display='block'; } } //采用事件委托处理 var oul = document.getElementById('ul'); var ali = ul.getElementsByTagName('li'); var content = document.getElementById('content'); var div = content.getElementsByTagName('div'); //ali[i].index = i; oul.onclick = function(ev) { var ev = ev || window.event; var target = ev.target || ev.srcElement; if(target.nodeName.toLowerCase() == "li"){ for(var i=0, len=ali.length; i<len; i++){ if(ali[i] == target){ //alert(ali[i]); ali[i].className = "current"; div[i].style.display = "block"; } else{ ali[i].className = ""; div[i].style.display = "none"; } } } } //jquery实现更方便 $('#ul li').click(function(){ //点击li的时候要切换样式 $(this).addClass('current').siblings().removeClass('current'); //根据li的索引值，确定div的显示，其他隐藏 $('#content>div').eq($(this).index()).show().siblings().hide(); }); //jquery实现更方便 $('#ul li').click(function(){ //点击li的时候要切换样式 $(this).addClass('current').siblings().removeClass('current').parent().next().find('div').eq($(this).index()).show().siblings().hide(); }); </script> </body> </html>