实现左侧菜单功能，有以下三种方法:
a、方法一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<div>
<div>
<div id="m1" onclick="change(1)">菜单一</div>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
<div>
<div id="m2" onclick="change(2)">菜单二</div>
<div class="hide">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
<div>
<div id="m3" onclick="change(3)">菜单三</div>
<div class="hide">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
</div>
<script src="jquery-3.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
function change(arg){
if(arg == 1){
var menu=$('#m1')
}else if(arg == 2){
var menu = $('#m2')
}else{
var menu = $('#m3')
}
console.log(menu.text());
}
</script>
</body>
</html>
运行结果:
解析:鼠标点击菜单一时，arg == 1，通过$('#m1')获取对应标签然后赋值给menu;获取两个标签之间的内容可以用menu.text()来操作.
b、方法二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<div>
<div>
<div onclick="change(this)">菜单一</div>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
<div>
<div onclick="change(this)">菜单二</div>
<div class="hide">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
<div>
<div onclick="change(this)">菜单三</div>
<div class="hide">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
</div>
<script src="jquery-3.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
function change(arg){
var t = $(arg).text();
console.log(t);
}
</script>
</body>
</html>
显示结果:
解析:当点击菜单一，那么change(this)传递过来的$(arg)就是菜单一；同样如果是菜单二，则$(arg)传过来的是菜单二，依次类推，换句话说changge(this)中的this表示的就是点击的当前标签，但是通过change(this)传递到函数change(arg)中，然后用$(arg)就变成了jQuery的选择器，所以就可以把$(arg).text()交给jQuery进行分析，另外如果我们有多个菜单，这样写相对方法一要省去很多if判断的步骤。
c、方法三
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<div>
<div>
<div onclick="change(this)">菜单一</div>
<div class ="content hide">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
<div>
<div onclick="change(this)">菜单二</div>
<div class="content hide">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
<div>
<div onclick="change(this)">菜单三</div>
<div class="content hide">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
</div>
<script src="jquery-3.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
function change(arg){
$(arg).next().removeClass('hide');
$(arg).parent().siblings().find('.content').addClass('hide');
}
</script>
</body>
</html>
演示结果:
解析:
$(arg)表示当前点击的标签
①找到下一个标签，移除hide
$(arg).next()下一个标签
removeClass('')删除标签中的某个属性
addClass('')当前标签中添加一个属性
$(arg).next().removeClass('hide') 在下一个标签中移除样式"hide"
②、找到其他标签，隐藏其内容，即添加一个hide
$(arg).parent()当前标签的父标签
$(arg).parent().siblings() 所有父标签的兄弟标签
$(arg).parent().siblings().find('.content').addClass('hide') 在所有父标签的兄弟标签中找到含有"content"的标签并且添加一个"hide"样式
本文转自027ryan 51CTO博客，原文链接：http://blog.51cto.com/ucode/1845141，如需转载请自行联系原作者
