js 多个按钮控制多个DIV的隐藏和显示
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>RunJS</title>
<script type="text/javascript" src="/jquery-1.10.2.min.js"></script>
<script>
var n=3;
onload=function(){
var box=document.querySelector(".box");
var ps=box.querySelectorAll("p");
var btn=box.querySelector("button");
if(ps.length<n){
btn.style.display="none";
return;
}
for(var i=n;i<ps.length;i++){
ps[i].style.display="none";
}
btn.onclick=function(){
for(var i=n;i<ps.length;i++){
ps[i].style.display="block";
}
this.style.display="none";
}
}
</script>
</head>
<body>
<div class="box">
<p>我是内容1</p>
<p>我是内容2</p>
<p>我是内容3</p>
<p>我是内容4</p>
<p>我是内容5</p>
<p>我是内容6</p>
<button>点击显示全部</button>
</div>
<div class="box">
<p>我是内容1</p>
<p>我是内容2</p>
<p>我是内容3</p>
<p>我是内容4</p>
<p>我是内容5</p>
<p>我是内容6</p>
<button>点击显示全部</button>
</div>
<div class="box">
<p>我是内容1</p>
<p>我是内容2</p>
<p>我是内容3</p>
<p>我是内容4</p>
<p>我是内容5</p>
<p>我是内容6</p>
<button>点击显示全部</button>
</div>
</body>
</html>
只能控制一个，要怎么能控制多个DIV？
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>RunJS</title>
<script type="text/javascript" src="/jquery-1.10.2.min.js"></script>
<script>
var n=3;
onload=function(){
var boxs=document.querySelectorAll(".box");
for(var k=0;k<boxs.length;k++){
var box=boxs[k];
var ps=box.querySelectorAll("p");
var btn=box.querySelector("button");
if(ps.length<n){
btn.style.display="none";
continue;
}
for(var i=n;i<ps.length;i++){
ps[i].style.display="none";
}
btn.onclick=function(){
for(var i=n;i<ps.length;i++){
ps[i].style.display="block";
}
this.style.display="none";
}
}
}
</script>
</head>
<body>
<div class="box">
<p>我是内容1</p>
<p>我是内容2</p>
<p>我是内容3</p>
<p>我是内容4</p>
<p>我是内容5</p>
<p>我是内容6</p>
<button>点击显示全部</button>
</div>
<div class="box">
<p>我是内容1</p>
<p>我是内容2</p>
<p>我是内容3</p>
<p>我是内容4</p>
<p>我是内容5</p>
<p>我是内容6</p>
<button>点击显示全部</button>
</div>
<div class="box">
<p>我是内容1</p>
<p>我是内容2</p>
<p>我是内容3</p>
<p>我是内容4</p>
<p>我是内容5</p>
<p>我是内容6</p>
<button>点击显示全部</button>
</div>
</body>
</html>追问
点击第1个按钮还是第2个按钮，都是第三个DIV显示全部，然而第1个和第2个DIV不显示隐藏内容，请问如何解决？
追答<script>
var n = 3;
onload = function() {
var boxs = document.querySelectorAll(".box");
for (var k = 0; k < boxs.length; k++) {
var box = boxs[k];
var ps = box.querySelectorAll("p");
var btn = box.querySelector("button");
if (ps.length < n) {
btn.style.display = "none";
continue;
}
for (var i = n; i < ps.length; i++) {
ps[i].style.display = "none";
}
(function(ps){
btn.onclick = function() {
for (var i = n; i < ps.length; i++) {
ps[i].style.display = "block";
}
this.style.display = "none";
}
})(ps);
}
}
</script>
js控制div显示隐藏实现(jquery控制div显示隐藏)
首先我们创建一个div，和一个按钮。用按钮的点击来控制div的显示或隐藏。02 添加一个样式名叫hide的样式，主要是设置display=none，即隐藏。03 接着用js来实现显示，隐藏的功能。我们用Jquery的hasClass方法来判断div是否有hide样式，有则删除这个样式，即显示div。如果没有，则添加一个hide的样式，即隐...
js设置div显示隐藏?
首先我们创建一个div，和一个按钮。用按钮的点击来控制div的显示或隐藏。02添加一个样式名叫hide的样式，主要是设置display=none，即隐藏。首先写出架构，两个buttod（按钮）。下面是一个div存放文本和在后面的被js控制。先用css选择器为div控制属性。然后写出script标签，可以写在外部，然后在引用。js控...
js多个button控制多个div显示与隐藏
设置...等var aDiv =document.getElementsByTagName("div")[0].getElementsByTagName("div");\/\/通过input找到5个按钮var aBtn = document.getElementsByTagName("input");\/\/按钮和div文字描述存在一一对应的关系,第几个按钮,就对应要显示的第几个div文字描述\/\/循环给5个按钮添加被点击时的事件for...
怎么用JS控制多个DIV的显示和隐藏问题
用一个全局的变量保存已经显示的div的id或者引用 div隐藏的时候把变量设置为null 点击回复的时候传入要显示的div的id或引用,与变量对比 如果一样,则隐藏对应层,如果不一样,则隐藏原来的层,显示新的层,同时更新全局变量
JS如何控制DIV的显示和隐藏
打开Sublime Text编辑器，新建一个HTML文档，注意一定要设置编码格式为utf8，如下图所示 然后在Body区域准备一个div和一个button按钮，接下来会实现点击按钮来显示和隐藏DIV，如下图所示 接下来我们实现JS脚本的功能，如下图所示，主要运用display属性来控制div的显示或者隐藏 最后运行页面，我们点击按钮的...
如何用js通过下拉菜单来实现div的隐藏和显示
1、首先写出架构，两个 buttod （按钮）。2、下面是一个 div 存放文本和在后面的被js控制。3、先用 css 选择器 为 div 控制属性。4、然后写出 script 标签，可以写在外部，然后在引用。5、然后我们用 js 设置变量，这样我们才可以控制变量来控制元素。6、这里用 alert 测试一次我们是否选对了...
如何通过js 控制多个div显示或隐藏?
纯js的话不怎么会，使用jquery的话很简单的。建议楼主学习一下 引用一下jquery，然后 function放head中 function test(){ (".1").css("display","none"); \/\/隐藏class为1 的div \/\/控制显示的话 $(".1").css("display","block");\/\/$(".2").css("display","none"); 隐藏class...
js定时控制多个div自动切换 5个div,只显示一个,其余4个隐藏,用js控制每...
if(NowImg==MaxImg)\/\/判断当前div是否是最后一个，如果是则从第一个重新轮回显示 NowImg=1;else NowImg++;\/\/设置下一个显示的图片 } theTimer=setInterval("show()",10000);\/\/设置定时器，显示下一个图片，10000表示每间隔10秒，可以改的。。。<\/script> <\/head> <body onload="show()">...
js里面的显示或者隐藏(js中隐藏元素和显示用什么)
js怎么用一个按钮控制DIV来回显示和隐藏1、打开Hbuilder编辑器，新建一个html空白文档，输入基本的结构，然后按下Crtl+S保存一下：2、创建一个button按钮，给按钮设置一个id，名字设置为带升“myBT”，创建一个用来显示隐藏的div，将其id设置为“main”：3、给div和button设置一些样式，为了美观好看，...
点击按钮显示div内容在点击按钮显示另一个div内容用JS怎么写
showBox.innerHTML=div2.innerHTML;btn.value="显示div1的内容"flag=true;} } \/\/方法二:用按钮控制div1,div2的显示隐藏 var flag=true;btn.onclick=function(){ if(flag){ div1.style.display="block";div2.style.display="none";btn.value="显示div2的内容"flag=false;} else{ div2....
