<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title></title> ???<script> ???????window.onload = function(){ ???????????function tab(obj){ ???????????????var target = document.getElementById(obj); ???????????????var spans = target.getElementsByTagName("span"); ???????????????var lis = target.getElementsByTagName("li"); ???????????????for(var i=0; i < spans.length; i++){ ???????????????????spans[i].index = i; ???????????????????spans[i].onmouseover = function(){ ???????????????????????for(var j=0; j<spans.length;j++){ ???????????????????????????spans[j].className=""; ???????????????????????????lis[j].className = ""; ???????????????????????} ???????????????????????this.className="current"; ???????????????????????lis[this.index].className ="show"; ???????????????????} ???????????????} ???????????} ???????????tab("one"); ???????????tab("tow"); ???????????tab("third") ???????} ???</script> ???<style> ???????*{ ???????????margin: 0; ???????????padding: 0; ???????} ???????ul{ ???????????list-style: none; ???????} ???????.box{ ???????????width: 340px; ???????????height: 300px; ???????????border: 1px solid #ccc; ???????????margin: 100px auto; ???????} ???????.mt span{ ???????????display: inline-block; ???????????width: 80px; ???????????height: 30px; ???????????background-color: pink; ???????????text-align: center; ???????????line-height: 30px; ???????????cursor: pointer; ???????} ???????.mb li{ ???????????width: 100%; ???????????height: 270px; ???????????background-color: purple; ???????????display: none; ???????} ???????.mt span.current{ ???????????background-color: purple; ???????} ???????.mb li.show{ ???????????display: block; ???????} ???</style></head><body><div class="box" id="one"> ???<div class="mt"> ???????<span class="current">新闻</span> ???????<span>体育</span> ???????<span>娱乐</span> ???????<span>八卦</span> ???</div> ???<div class="mb"> ???????<ul> ???????????<li class="show">新闻</li> ???????????<li>体育</li> ???????????<li>娱乐</li> ???????????<li>八卦</li> ???????</ul> ???</div></div><div class="box" id="tow"> ???<div class="mt"> ???????<span class="current">新闻</span> ???????<span>体育</span> ???????<span>娱乐</span> ???????<span>八卦</span> ???</div> ???<div class="mb"> ???????<ul> ???????????<li class="show">新闻</li> ???????????<li>体育</li> ???????????<li>娱乐</li> ???????????<li>八卦</li> ???????</ul> ???</div></div><div class="box" id="third"> ???<div class="mt"> ???????<span class="current">新闻</span> ???????<span>体育</span> ???????<span>娱乐</span> ???????<span>八卦</span> ???</div> ???<div class="mb"> ???????<ul> ???????????<li class="show">新闻</li> ???????????<li>体育</li> ???????????<li>娱乐</li> ???????????<li>八卦</li> ???????</ul> ???</div></div></body></html>通过传递盒子的id，对不同盒子的tab进行特效操作。鼠标通过不同的span标签时，显示不同的内容。
js--对tab的简单封装
原文地址：http://www.cnblogs.com/jiang-z/p/7468607.html