怎么用js实现，点击“继续”，隐藏当前div，显示下一个div，点击“返回”隐藏当前div，显示上一个div
3个回答
展开全部
document.getElementByID('continue').onclick = function(){
//找到所有的div
var div = document.getElementByTagName('div');
//循环div，找到处于显示状态的div将其隐藏，并将其下一个div显示
for(var i=0,len = div.length;i<len;i++){
if(div[i].style.display === 'block'){
div[i].style.display = 'none';
div[i+1].style.display = 'block';
break;
}
}
}
document.getElementByID('back').onclick = function(){
//找到所有的div
var div = document.getElementByTagName('div');
//循环div，找到处于显示状态的div将其隐藏，并将其下一个div显示
for(var i=0,len = div.length;i<len;i++){
if(div[i].style.display === 'block'){
div[i].style.display = 'none';
div[i-1].style.display = 'block';
break;
}
}
}我大概写了下，你看着改改把
更多追问追答
追问
11111
2222
3333
追答
你把var div = document.getElementByTagName('div');这段改成
var div = document.getElementByID('box').children;
然后input加上id
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<body>
<input name="my_btn" type="button" value="继续" />
<!-- A div -->
<div class="Adiv">A div</div>
<!-- B div -->
<div class="Bdiv" style="display:none;">B div</div>
</body>
$(function(){
$('input[name=my_btn]').click(function(){
if ($('div.Adiv').is(':hidden')) {
$('div.Adiv').fadeIn(0);
$('div.Bdiv').fadeOut(0);
$(this).val('继续');
} else {
$('div.Adiv').fadeOut(0);
$('div.Bdiv').fadeIn(0);
$(this).val('返回');
}
});
});
========================================================================
<div id="box">
<div style="display:block;">11111</div>
<div style="display:none;">2222</div>
<div style="display:none;">3333</div>
</div>
<input name="a_btn" type="button" value="返回"/>
<input name="b_btn" type="button" value="继续"/>
$('input[name=a_btn], input[name=b_btn]').click(function(){
var _index = $('div#box div:visible').index(), _t = $('div#box div').length;
$('div#box div:visible').fadeOut(0);
$('div#box div:eq('+($(this).prop('name')==='a_btn'?_index-1<0?_t-1:_index-1:_index+1>_t-1?0:_index+1)+')').fadeIn(0);
});
<input name="my_btn" type="button" value="继续" />
<!-- A div -->
<div class="Adiv">A div</div>
<!-- B div -->
<div class="Bdiv" style="display:none;">B div</div>
</body>
$(function(){
$('input[name=my_btn]').click(function(){
if ($('div.Adiv').is(':hidden')) {
$('div.Adiv').fadeIn(0);
$('div.Bdiv').fadeOut(0);
$(this).val('继续');
} else {
$('div.Adiv').fadeOut(0);
$('div.Bdiv').fadeIn(0);
$(this).val('返回');
}
});
});
========================================================================
<div id="box">
<div style="display:block;">11111</div>
<div style="display:none;">2222</div>
<div style="display:none;">3333</div>
</div>
<input name="a_btn" type="button" value="返回"/>
<input name="b_btn" type="button" value="继续"/>
$('input[name=a_btn], input[name=b_btn]').click(function(){
var _index = $('div#box div:visible').index(), _t = $('div#box div').length;
$('div#box div:visible').fadeOut(0);
$('div#box div:eq('+($(this).prop('name')==='a_btn'?_index-1<0?_t-1:_index-1:_index+1>_t-1?0:_index+1)+')').fadeIn(0);
});
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<script>
function show(){
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
div1.style.display="none";
div2.style.display="block";
}
function hide(){
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
div1.style.display="block";
div2.style.display="none";
}
</script>
<style>
#div1{width:400px; height:400px; background:#0CC; display:block;}
#div2{width:400px; height:400px; background:#000; display:none;}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<input type="button" id="btn1" value="继续" onclick="show()">
<input type="button" id="btn2" value="返回" onclick="hide()">
用js写太麻烦了，建议用jquery
function show(){
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
div1.style.display="none";
div2.style.display="block";
}
function hide(){
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
div1.style.display="block";
div2.style.display="none";
}
</script>
<style>
#div1{width:400px; height:400px; background:#0CC; display:block;}
#div2{width:400px; height:400px; background:#000; display:none;}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<input type="button" id="btn1" value="继续" onclick="show()">
<input type="button" id="btn2" value="返回" onclick="hide()">
用js写太麻烦了，建议用jquery
追问
额，我不只2个div，4个
追答
你是像要轮播效果？我只能说赶快学jquery吧
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
