<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content=" ">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;}
a{text-decoration: none;}
ul,li{list-style: none;}
body{font-size: 14px;font-family: "微软雅黑";}
#box{width: 500px;height: 400px;margin: 30px auto;border: 1px solid #333;}
#card{height: 50px;background: pink;}
#card li{width: 60px;height: 50px;float: left;border-right: 1px solid #333;text-align: center;line-height: 50px;}
#card li.active{background: green;color: #fff;}
#tab li{height: 450px;width: 500px;position: absolute;display: none}
</style>
</head>
<body>
<div id="box">
<ul id="card">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul id="tab">
<li style="display:block">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script type="text/javascript">
var cards = document.getElementById("card").children;
var tabs = document.getElementById("tab").children;
for(var i=0;i<cards.length;i++){
cards[i].index = i;
cards[i].onclick = function(){
this.className = "active";
siblings(this,function(){
this.className = "";
});
tabs[this.index].style.display = "block";
siblings(tabs[this.index],function(){
this.style.display = "none";
});
};
};
function siblings(param,callBack){
var Doms = param.parentNode.children;
var arr = [].slice.call(Doms);
arr.filter(function(dom){
if(dom != param && dom.tagName == param.tagName){
callBack.call(dom);
};
});
};
</script>
</body>
</html>
sort 类数组添加到数组
var arr = [].slice.call(Doms);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content=" ">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;}
a{text-decoration: none;}
ul,li{list-style: none;}
body{font-size: 14px;font-family: "微软雅黑";padding: 100px;}
div{width: 100px;height: 20px;text-align: center;line-height: 20px;background: red;color: #fff;margin-top: 3px;}
</style>
</head>
<body>
<input type="button" id="btn" value="排序" onclick="fn()" />
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<script type="text/javascript">
var divDoms = document.getElementsByTagName("div");
var arr = [].slice.call(divDoms);
var mark = true;
function fn(){
mark = !mark;
arr.sort(function(a,b){
var d1 = a.innerHTML;
var d2 = b.innerHTML;
if(mark){
return d1>d2;
}else{
return d1<d2;
};
});
for(var i=0;i<arr.length;i++){
document.body.appendChild(arr[i]);
};
};
var arr2 = [1,2,3,4,5];
</script>
</body>
</html>