怎么实现点击Button控件使两个div的交替显示
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么实现点击Button控件使两个div的交替显示相关的知识，希望对你有一定的参考价值。
<div runat= "server " id = "abc " style = "Display:none; "> </div>然后在后台page_load中写：
yourButton.Attributes.[ "onclick "]=abc.ClientID+ ".style.display= 'inline ';return false; ";
这里的按钮并不限制是什么控件，但是脚本说明了onclick如果用在Button这类会回发的控件上，实际上阻止了回发（因为“return false”）。
上面是只能在客户端有效的。如果是需要回发并且保持其状态，应该在按钮的服务器端事件处理中写：
abc.Style[ "display "]= "inline ";
而不用去设置按钮的onclick属性。 参考技术A 我可以完成你的效果，用的是javascript+ajax+asp.net(c#)
请看代码：
javascript //i1为图片id，obj为Label的id
function t1(obj)
if(document.all.i1!=null)
document.all.i1.style.display="none";
obj.innerhtml="*正在更新中...";
-----------------------------------------------------------
c#
this.TextBox1.Attributes.Add("onchange", "t1(Label1)");
protected void TextBox1_TextChanged(object sender, EventArgs e)
Thread.Sleep(5000);
--------------------------------------------------------------
把Button放在updatapanel里面
另外,虚机团上产品团购,超级便宜 参考技术B Jquery的实现很简单:
$(function()
$("buttonID").toggle(
function()$("#divID1").show();$("#divID2").hide(),
function()$("#divID2").show();$("#divID1").hide()
)
)
怎么用js实现，点击“继续”，隐藏当前div，显示下一个div，点击“返回”隐藏当前div，显示上一个div
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
还是不行，麻烦发个源码个我，460796496
参考技术A <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);
); 参考技术B <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>
#div1width:400px; height:400px; background:#0CC; display:block;
#div2width: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吧
以上是关于怎么实现点击Button控件使两个div的交替显示的主要内容，如果未能解决你的问题，请参考以下文章
在WPF中怎么样实现Button点击事件使那个星星向淘宝那样子逐次变色呢？
C#怎么获取当前单击的控件名称,比如有100个Button 一个button_Click() ，点击按钮后显示所点击的按钮名称