-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
15692118659
沉沙
2018-11-23
来源 ：
阅读 1188
评论 0
摘要：本篇教程介绍了JavaScript基础教程之JavaScript实例操作，希望阅读本篇文章以后大家有所收获，帮助大家对JavaScript的理解更加深入。
本篇教程介绍了JavaScript基础教程之JavaScript实例操作，希望阅读本篇文章以后大家有所收获，帮助大家对JavaScript的理解更加深入。
<
实现左侧菜单功能，有以下三种方法:
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>
运行结果:
wKioL1fHoIfSp4ipAAC101QRKhg896.png
解析:鼠标点击菜单一时，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>
显示结果:
wKioL1fHptDixmWQAACm3Eh-ZoY327.png
解析:当点击菜单一，那么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>
演示结果:
wKioL1fHrz7z2OETAABRlSiRRog755.png
解析:
$(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"样式
本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端JavaScript频道！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式AI+学习就业服务平台 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
资料领取
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
