选项卡切换在做网页的时候经常会用到，以往都是用JQ来实现，代码简单易懂，今天用原生的js实现了一下，二者还是有很大不同的，可以对比一下代码来研究一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.js"></script>
<style>
body{margin: 20px;padding: 0;}
ul{list-style: none; margin: 0;padding: 0; height: auto; overflow: hidden;}
li{float: left; border: 1px solid #333333; padding: 5px; margin-right: 5px; }
.li_hover{background: #C87800;}
.div_list{border: 1px solid #333; display: none; height: 300px; margin-top: 10px; background: #C87800; width: 300px;}
</style>
<script> /*js方法*/
window.onload=function(){
var li=document.getElementsByTagName("li");//获取li的集合
var divlist=document.getElementsByClassName("div_list");//获取div_list 集合
for(var i=0;i<li.length;i++){//循环
li[i].index=i;//给li添加索引值
li[i].onclick=function(){//li点击事件
for(var j=0;j<li.length;j++){//第二层for循环 初始化li 和div的值
li[j].className="";
divlist[j].style.display="none";
}
this.className="li_hover";//给点击的li添加背景色
divlist[this.index].style.display="block";//通过this.index显示对应的div
}
}
} /*JQ方法*/
/*
$(function(){
$("ul li").click(function(){
var li_index=$(this).index();//获取点击的li的索引
$("ul li").removeClass("li_hover");//清空所有li的样式
$(this).addClass("li_hover");//给当前点击的li添加背景样式
$(".div_list").css("display","none");//隐藏所有的 div
$(".div_list").eq(li_index).css("display","block");//显示对应索引的div
})
})*/
</script>
</head>
<body>
<ul>
<li class="li_hover">aaaa</li>
<li>bbbb</li>
<li>cccc</li>
</ul>
<div>
<div class="div_list" style="display: block;">aaaaaaaaaaaaa</div>
<div class="div_list">bbbbbbbbbbbbb</div>
<div class="div_list">ccccccccccccc</div>
</div>
</body>
</html>
时间： 2024-11-05 05:01:18