1、实现左侧菜单功能
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>
运行结果:
解析:鼠标点击菜单一，通过 == 1，通过$(‘#1‘)获取对应标签然后赋值给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>
显示结果:
解析:当点击菜单的时候，通过 = $(arg).text获取当前标签的内容;this本身是js的一个元素，但是通过change(this)传递到change(arg)中，然后通过var t = $(arg).text();让jQuery进行分析，具体在哪个标签里面去获取内容。
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
$(arg).parent()当前标签的父标签
$(arg).parent().siblings() 所有父标签的兄弟标签
$(arg).parent().siblings().find(‘.content‘).addClass(‘hide‘)