原生js选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style type="text/css">
input{
width:80px;
line-height:30px;
color:#fff;
font-weight: 600;
border:none;
background: yellowgreen;
}
.active{
background: skyblue;
}
div{
width:300px;
height:220px;
background:deepskyblue;
display: none;
}
.checked{
display: block;
}
</style>
</head>
<body>
<input type="button" class="active"value="AAA" data-ind="0"/>
<input type="button" value="BBB" data-ind="1"/>
<input type="button" value="CCC" data-ind="2"/>
<div class="checked">
aaa
</div>
<div>bbb</div>
<div>ccc</div>
<script type="text/javascript">
//方法一:
/*var oBtns = document.getElementsByTagName("input"),
oDivs = document.getElementsByTagName("div"),
len = oBtns.length,i = 0,btn = null;
for(;i < len;i++){
btn = oBtns[i];
btn.ind = i;
btn.onclick = function(){
var ind = this.ind,j = 0;
//排他思想，清空所有，留下当前
for(;j < len;j++){
oBtns[j].className = "";
oDivs[j].className = "";
}
oBtns[ind].className = "active";
oDivs[ind].className = "checked";
}
}*/
//方法二:委托(代理) 不能自动获取下标，需要自定义属性
/*document.body.onclick = function(evt){
var oBtns = document.getElementsByTagName("input"),
oDivs = document.getElementsByTagName("div"),e,target;
e = evt || window.event;
target = e.target || e.srcElement;
if(target.nodeName.toUpperCase() == "INPUT"){
var ind = target.getAttribute("data-ind");
console.log(ind);
//排他
for(var j = 0,len = oBtns.length;j < len;j++){
oBtns[j].className = "";
oDivs[j].className = "";
}
oBtns[ind].className = "active";
oDivs[ind].className = "checked";
}
}*/
//方法三:ES6
/*var oBtns = Array.from(document.getElementsByTagName("input")),
oDivs = Array.from(document.getElementsByTagName("div"));
len = oBtns.length;
oBtns.forEach( (btn,ind)=>{
btn.onclick = ()=>{
for(var j = 0;j < len;j++){
oBtns[j].className = "";
oDivs[j].className = "";
}
oBtns[ind].className = "active";
oDivs[ind].className = "checked";
}
})*/
//方法四:let
/*var oBtns = Array.from(document.getElementsByTagName("input")),
oDivs = Array.from(document.getElementsByTagName("div"));
len = oBtns.length;
for(let i = 0;i < len;i++){
oBtns[i].onclick = ()=>{
for(var j = 0;j < len;j++){
oBtns[j].className = "";
oDivs[j].className = "";
}
oBtns[i].className = "active";
oDivs[i].className = "checked";
}
}*/
//方法五:闭包1
/*var oBtns = Array.from(document.getElementsByTagName("input")),
oDivs = Array.from(document.getElementsByTagName("div"));
len = oBtns.length;
for(var i = 0;i < len;i++){
oBtns[i].onclick = (function(ind){
return function(){
for(var j = 0;j < len;j++){
oBtns[j].className = "";
oDivs[j].className = "";
}
oBtns[ind].className = "active";
oDivs[ind].className = "checked";
}
})(i)
}*/
//方法六:闭包2
/*var oBtns = Array.from(document.getElementsByTagName("input")),
oDivs = Array.from(document.getElementsByTagName("div"));
len = oBtns.length;
for(var i = 0;i < len;i++){
(function(ind){
oBtns[i].onclick = function(){ //这里写i或者ind都行
for(var j = 0;j < len;j++){
oBtns[j].className = "";
oDivs[j].className = "";
}
oBtns[ind].className = "active";
oDivs[ind].className = "checked";
}
})(i);
}*/
//方法七: jQ
//结构:div#tab ul>li ol>li>img
/*$("#tab ul li").click(function(){
$(this).addClass("active").siblings().removeClass("active");
var index = $(this).index
$(#tab ol li).eq(index).addClass("checked").siblings().removeClass("checked");
});*/
</script>
<div id="div2" class="a b c"></div>
<script type="text/javascript">
//拓展 增加类名，删除类名
div2.classList.add("d");
div2.classList.remove("b");
</script>
</body>
</html>
