即实现鼠标点击其中一个菜单发生样式的改变，当点击下一个菜单时，当前菜单样式改变，其他菜单均变为之前样式。
用JavaScript，jQuery都可以实现，只是后者是封装的JavaScript库，具有sibling()方法，可以直接使其同胞元素取消样式，而JavaScript需要使用循环来使其上一菜单样式取消，当前菜单加上样式。
实现代码：
1.JavaScript：
当点击当前菜单时，上一菜单样式取消，当前菜单增加该样式，为了下一菜单的实现，须将：onum = this;将当前li对象赋予onum。
this相当于是当前li对象。
<script>
var arr = document.getElementsByTagName("li");
var i,num = 0;
onum = arr[num];
for(i in arr){
arr[i].onclick = function(){
onum.className = ' ';
this.className = "active";
onum = this;
}
}
</script>
2.jQuery：
使用sibling()方法来使当前元素的同胞元素都取消该样式。
this表示当前元素。
<script>
$("li").click(function(){
$(this).addClass("active").siblings().removeClass("active");
});
</script>
如此看来，jQuery是要比JavaScript简便一些，但jQuery思想还是使用的JavaScript思想，并未改变。
完整代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ padding:0px;margin:0px; list-style:none; } .box{ width: 400px; height: 50px; background-color: antiquewhite; } .box ul li{ height: 50px; width: 25%; line-height: 50px; display: block; float: left; text-align: center; } ul li:hover{ cursor: pointer; } .active{ background:red; } </style> </head> <body> <div class="box"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <script> var arr = document.getElementsByTagName("li"); var i,num = 0; onum = arr[num]; for(i in arr){ arr[i].onclick = function(){ onum.className = ' '; this.className = "active"; onum = this; } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ padding:0px;margin:0px; list-style:none; } .box{ width: 400px; height: 50px; background-color: antiquewhite; } .box ul li{ height: 50px; width: 25%; line-height: 50px; display: block; float: left; text-align: center; } ul li:hover{ cursor: pointer; } .active{ background:red; } </style> </head> <body> <div class="box"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <script> var arr = document.getElementsByTagName("li"); var i,num = 0; onum = arr[num]; for(i in arr){ arr[i].onclick = function(){ onum.className = ' '; this.className = "active"; onum = this; } } </script> </body> </html>
注意：
在jQuery使用时需要引入本地库文件，或者使用那个网址也可以