<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
.menuList li {
width: 20%;
float: left;
border-bottom: 1px solid #ccc;
font-size: 24px;
padding: 20px 0;
text-align: center;
background-color: #ccc;
}
</style>
</head>
<body>
<ul class="menuList">
<li class="menu">全部</li>
<li class="menu">待支付</li>
<li class="menu">待確認</li>
<li class="menu">待入住</li>
<li class="menu">已入住</li>
</ul>
<script type="text/javascript">
function siblings(elem){ //參數elem就是想取誰的兄弟節點，就把那個元素傳進去
var nodes=[]; //定義一個數組，用來存elem的兄弟元素
var previ=elem.previousSibling;
while(previ){ //先取o的哥哥們 判斷有沒有上一個哥哥元素，如果有則往下執行 previ表示previousSibling
if(previ.nodeType===1){
nodes.push(previ);
}
previ=previ.previousSibling; //最后把上一個節點賦給previ
}
nodes.reverse(); //把順序反轉一下 這樣元素的順序就是按先后的了
var nexts=elem.nextSibling; //再取elem的弟弟
while(nexts){ //判斷有沒有下一個弟弟結點 nexts是nextSibling的意思
if(nexts.nodeType===1){
nodes.push(nexts);
}
nexts=nexts.nextSibling;
}
return nodes; //最后按從老大到老小的順序，把這一組元素返回
}
var nowMenu = document.getElementsByClassName("menu"); //獲取類名
for(var i=0; i<nowMenu.length; i++){
nowMenu[i].index = i; //設置下標值
nowMenu[i].onclick = function(){
var index = this.index; //獲取下標值
var nowIndex = nowMenu[index]; //確認當前點擊的標簽
for(var m=0; m<nowMenu.length-1; m++){
this.style.background = "#999"; //改變當前點擊元素背景
siblings(nowIndex)[m].style.background = "#ccc"; //改變當前點擊的兄弟元素背景
}
}
}
</script>
</body>
</html>
做項目的時候，要用原生JS寫，在做菜單點擊切換的時候不能用JQ的.siblings()方法了，所以就百度了一下，現在貼上來，方便以后查看。
鏈接：
http://www.qdfuns.com/notes/31329/38c5cd103df53dfea036a381c24bcf49