常见的Tab选项卡，JQ vs JS

共同样式：

<style>
.tab{ width:300px;}
.tab ul li{float:left; width:100px; line-height:30px; background:#f1f1f1; text-align:center;}
.tab ul .on{background:#000000; color:#ffffff;}
.tab dl dt{float:left;display:none;}
</style>

共同元素：

<div class="tab">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <dl>
    <dt>1内容</dt>
    <dt>2内容</dt>
    <dt>3内容</dt>
  </dl>
</div>

脚本不同：

<script>
$(document).ready(function(){
	$(".tab ul li:first").addClass("on");//第一个默认添加on
	$(".tab dl dt:first").fadeIn();//第一个默认显示
	$(".tab ul li").on("mouseover",
		function(){
			$(this).addClass("on");
			$(this).siblings().removeClass("on");
			var index=$(this).index();
			$(".tab dl dt").eq(index).fadeIn();
			$(".tab dl dt").eq(index).siblings().hide();
		}
	)
})
</script>

**================上JQ==============VS==============下JS====================**

<script>
var tab_ullist=document.getElementsByClassName("tab")[0].children[0].children;
var tab_dllist=document.getElementsByClassName("tab")[0].children[1].children;
tab_ullist[0].classList.add("on");//第一个默认添加on
tab_dllist[0].style.display="block";//第一个默认显示
for(var i=0;i<tab_ullist.length;i++){
	tab_ullist[i].onmouseover = function(){
		for(var k=0;k<tab_ullist.length;k++){
			tab_ullist[k].removeAttribute("class");//移除class	
			tab_dllist[k].removeAttribute("style");//移除style
			if(tab_ullist[k]==this){
				var index=k;
			}
		}
		this.classList.add("on");
		tab_dllist[index].style.display="block";
	}
}
</script>