<!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