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

JavaScript024

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显示隐藏的案例：

用jQuery方便点

比如你有几个元素的id分别是name0,name1,name2

那么jQuery的写法是：$("[id^='name']").hide()

id后面的尖号是指开头匹配，hide()是jQuery的方法

你可以问的再详细点？

html

<html>

  <body>

    <div id="1438531200">这行字显示6秒钟，可自定义时间。</div>

    <div id="1438532100">这行字显示6秒钟，可自定义时间。</div>

    <div id="1438801200">这行字显示6秒钟，可自定义时间。</div>

  </body>

</html>

js

function hide(id){

  var all_div = document.querySelectorAll(selector)

  //可以用jquery  var all_div = $('div')

  for(var i=0,l = all_div.length , div i<l i++){

     div = all_div[i]

     if(div && div.id && div.id < id){//id小于值

       div.style.display = 'node'

     }

  }

}

var scdeadtime = 1438801200+10800

hide(scdeadtime)//隐藏id小于此值的