共同样式:
<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>