2个回答
展开全部
js 中 处理 div 的style 的 display为 block/none即可
代码示例:
1 2 3 4 5 | 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可见, 2/3不可见;
给定一个计数器, 以3为模, 到3 就自动置0表示为1号div
处理显示/隐藏.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | < 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 如果你没用过, 暂时先这样调吧. |
展开全部
用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>
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>
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询