传参小例子--点击哪个按钮显示相对应的盒子

最新推荐文章于 2022-07-24 16:05:28 发布

erdouzhang

最新推荐文章于 2022-07-24 16:05:28 发布

阅读量1.4k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/erdouzhang/article/details/69525844

版权

这篇博客通过一个实例展示了如何使用JavaScript实现点击不同按钮，显示对应的内容。HTML用于布局和创建按钮，CSS用于样式设置，而JavaScript则负责处理按钮点击事件，动态控制盒子的显示和隐藏。

摘要由CSDN通过智能技术生成

这里写图片描述

点击盒子2按钮显示盒子2，点击盒子3按钮显示盒子3
html:

<button  onclick="fun('box1');">盒子1</button> <!--'box1'是实参，点击之后把实参传给形参  引号是外双内单 -->
<button  onclick="fun('box2');">盒子2</button>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

erdouzhang

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

用三种方法做：点击盒子显示盒子的顺序(加属性，闭包，let关键字)

yangaoyuan1999的博客

11-04

627

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{

十三、JavaScript事件|事件流

qq_45956680的博客

06-08

357

十三、JavaScript事件 1.事件_事件流一、什么是事件：事情的起因二、事件流 1》事件冒泡：从内到外（先触发里面的，再触发外部） 2》事件捕获：从外到内测验： <div id="dv1" style="background: red;width: 400px;height: 400px;"> <div id="dv2" style="background: wheat;width: 200px;height: 200px;"></div> &lt

参与评论您还未登录，请先登录后发表或查看评论

点击按钮传递参数

weixin_45870877的博客

07-24

933

点击按钮传递参数

jquery实现在元素外单击，隐藏此元素

小丁的专栏

04-15

1688

假如在元素A外单击隐藏A实现的思路是判断被鼠标按下时的元素的所有父元素中是否包含了A，没有包含则可以知道鼠标是在A之外单击的，则隐藏。代码如下： $(document).mouseup(function(event){ if($(event.target).parents("A").length==0){ $("A").hide(); } });

点击相应盒子弹出相应数字

m0_59199315的博客

12-23

527

发布点击正方形出现相应数字

2021-6月面试总结-vue，uniapp，小程序，h5，更新中

m0_67266787的博客

02-24

775

**一、**vue 2.6.11 vue****页面的生命周期？总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。创建前/后：在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在∗∗created∗∗阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在**created**阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在∗∗cre

uni-app基础知识点

qq_56045326的博客

06-06

4054

uni-app知识点详解

html点击一个文字显示提示框,点击文字弹出一个DIV层窗口代码

weixin_33426866的博客

06-09

3719

点击文字弹出一个DIV层窗口代码.black_overlay{display: none;position: absolute;top: 0%;left: 0%;width: 100%;height: 100%;background-color: black;z-index:1001;-moz-opacity: 0.8;opacity:.80;filter: alpha(opacity=88);}...

vue 触发内部元素的点击事件但不触发外部元素点击事件（阻止冒泡）

qq_45560350的博客

04-26

5003

https://www.jb51.net/article/175671.htm https://www.cnblogs.com/dongyuezhuang/p/11527447.html

JS首先使用div标签定义一个盒子，点击盒子来控制盒子的大小以及颜色。（1）盒子自身颜色为蓝色（2）第一次点击盒子区域，盒子变小并且颜色变黑色（3）再一次点击盒子区域，盒子恢复原来大小，但盒

WHT869706733的博客

11-25

4018

首先使用div标签定义一个盒子，点击盒子来控制盒子的大小以及颜色。（1）盒子自身颜色为蓝色（2）第一次点击盒子区域，盒子变小并且颜色变黑色（3）再一次点击盒子区域，盒子恢复原来大小，但盒子颜色变成红色要求：使用两种方式实现，第一种将盒子样式写在<script></script>代码里，第二种将盒子样式写在<style></style> <!DOCTYPE html> <html lang="en"> <head

js点击按钮切换盒子

Asuria

06-09

6800

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0;

点击使盒子显示隐藏

Sleeping_Fairy的博客

08-24

3375

一、刚开始时盒子的状态是这样的 body区域代码如下： <body> <button id="box1">点击</button> <div id="container" style="display:none;"> <div id="box2"> <button id="guanbi">关...

BOM，DOM入门

lz010123的博客

04-21

124

BOM和DOM入门

点击事件传参方式

06-29

710

路由跳转传参方法一 // 字符串 this.$router.push('/xx/xxx') // 对象 this.$router.push({ path: '/xx/xxx' }) // 命名的路由 this.$router.push({ name: 'xxx', params: { userId: wise }}) // 点击事件里面写 this.$router.push({ name: 'xxx', query: { key: aaa}}) ...

9.显示和隐藏盒子

a18740351964的博客

02-24

406

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 button { 8 ...

点击按钮传值

atfxcjk336801的博客

12-15

285

　　　　　　　　　　　　　　　效果图????：当点击第几个按钮就在粉色框内显示第几个盒子 1.首先搭一个框架，写HTML和css里面的布局，把界面搭好-----???? 注：border-radius: 5px,5px,5px,5px;这个为切圆角，四个角切5个像素 ...

javascript (js)通过button按钮实现盒子的显示和隐藏