原生js
<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title>tab标签页</title> <style> *{margin: 0;padding: 0;} #intro ul li { list-style: none; float: left; margin-right: 4px; font-size: 15px; } #box { height: 200px; width: 220px; margin: 20px auto; border: 1px solid black; } #intro { height: 24px; width: 170px; margin: 10px auto; } #content { height: 120px; width: 170px; margin: 5px auto; border: 1px solid black; } #content div { display: none; } #intro ul li { height: 20px; width: 50px; cursor: pointer; border: 1px solid black; text-align: center; } #intro ul li.current { background: greenyellow; } </style> </head> <body> <div id="box"> <div id="intro"> <ul id="ul"> <li class="current">php</li> <li>ruby</li> <li>python</li> </ul> </div> <div id="content"> <div style="display: block;">介绍.....php</div> <div>介绍.....ruby</div> <div>介绍.....python</div> </div> </div> <script> var oDiv1=document.getElementById('intro'); var aLi=oDiv1.getElementsByTagName('li'); var oDiv2=document.getElementById('content'); var aDiv=oDiv2.getElementsByTagName('div'); for(var i=0;i<aLi.length;i++) { aLi[i].index=i; aLi[i].οnmοuseοver=function() { for(var i=0;i<aDiv.length;i++) { aLi[i].className=''; aDiv[i].style.display='none'; } this.className='current'; aDiv[this.index].style.display='block'; } } </script> </body></html>
jQuery部分代码，替换上面的js部分
$('#intro ul li').mouseover(function(){ $(this).addClass('current').siblings().removeClass('current').parent().parent().next().find('div').eq($(this).index()).show().siblings().hide(); });
