js 怎么用一个按钮控制DIV来回显示和隐藏

JavaScript025

js 怎么用一个按钮控制DIV来回显示和隐藏,第1张

1、打开Hbuilder编辑器，新建一个html空白文档，输入基本的结构，然后按下Crtl+S保存一下：

2、创建一个button按钮，给按钮设置一个id，名字设置为“myBT”，创建一个用来显示隐藏的div，将其id设置为“main”：

3、给div和button设置一些样式，为了美观好看，这里无需设置display，因为默认就是显示的：

4、编写js脚本，这里用到Jquery，给button添加一个点击事件，然后获取div的dom，判断dom中的display属性值，如果是“none”，就显示div，否则则隐藏:

5、全部完成后，按下crtl+s保存，来到编辑器的右侧，观察显示效果，此时div是显示的：

6、点击hide按钮，会发现div消失了，反复点击按钮会重复显示隐藏的效果，以上就是用JS控制div显示隐藏的案例：

多选或者单选不应该是input type="radio" 或者 type="checkbox" 这种input标签么，怎么会想到用div呢

用div的话

方法1：在每个div中加个class,如 <div id="ok1" class="hhhhh"></div>

然后引入jquery，定义

$(function(){

      $('.hhhhh').click(function({

               //处理点击业务

      }))

})

方法2：在每个div中加个function,如 <div id="ok1" onclick="hhhhh(this)"></div>然后js方法：

function hhhhh(thisObj){

        //处理点击业务  thisObj为当前this对象

}

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。

2、在index.html中的<script>标签，输入js代码：$('div').click(function(){$(this).css('color','blue')})。

3、浏览器运行index.html页面，此时点击123所在的div，div会变为蓝色文本。