Question

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

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

Answer 1

js 中 处理 div 的style 的 display为 block/none即可

代码示例:

var div1document.getElementById("div1");
var div2=document.getElementById("div2");  
div1.style.display="none"; //隐藏
div2.style.display="block"; //显示
...

追问

可是 怎么用按钮控制呢 如果我有3个DIV 当前是显示第一个DIV 当我按下按钮时 显示第二个DIV 其他的DIV隐藏 再按下按钮 显示第三个DIV 其他的隐藏 又按下按钮 显示第一个DIV 其他的隐藏 就是这样 循环隐藏和显示 改这样实现啊

追答

假定 3个div 的 id 为 d1, d2, d3

你要的效果就是 按下按钮, d1/d2/d3 轮流显示, 不显示的隐藏, 按钮的 onclick 事件触发调用 toggleDiv 方法:

基本思路:

1. 需记录当前那个是可见的, 默认开始时, 1可见, 2/3不可见;

2. 给定一个计数器, 以3为模, 到3 就自动置0表示为1号div

3. 处理显示/隐藏.

<div id='d1' style='display:block;width:30px;height:20px;background-color:red'></div>
<div id='d2' style='display:none;width:30px;height:20px;background-color:blue'></div>
<div id='d3' style='display:none;width:30px;height:20px;background-color:yellow'></div>
<input type=button value="Toggle" onclick='toggleDiv()'>
<script>
// 全局变量
var divs=[];
var divCnt = 3; //div 数量 
for (var i=0;i<divCnt;i++) {
   divs[i] = document.getElementById("d"+(i+1));
}
var selectedDiv = 0;
function toggleDiv(){
    selectedDiv++;
    selectedDiv = selectedDiv % divCnt; //
    for (var i=0;i< divCnt;i++) {
       divs[i].style.display="none"; 
    }
    divs[selectedDiv].style.display="block"; 
 }   
 </script>
jquery 如果你没用过, 暂时先这样调吧.

Answer 2

用jQuery一句话搞定。
jQuery("div").toggle();

意思是，所有div隐藏的变成显示，显示的变为隐藏。也可以分类进行。
既然楼主的需求是这样的，那我就再写个。两种只选择一种就行
<script>
var count=1;
function aaa()
{
count=count%3+1;
for(var i=1;i<4;i++)
{
if(count==i)
{
jQuery("#d"+i).show();//jquery
document.getElementById("d"+i).style.display="block;";//js
}
else{
jQuery("#d"+i).hide();
document.getElementById("d"+i).style.display="none;";
}
}
}
</script>