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

erdouzhang

于 2017-04-07 13:04:51 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/erdouzhang/article/details/69525844

js 专栏收录该内容

98 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写图片描述

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

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

css:

div {
  width: 100px;
  height: 100px;
  background-color: pink;
  margin: 20px;
  display: none;
}

js:

<script>
  function fun(obj){ //obj是形参,不加引号  目的是为了接受实参
    var target = document.getElementById(obj); //obj是形参,不加引号
    target.style.display = "block";
  }
</script>