显示或隐藏的div点击
我有所有如下因素代码不同的ID和三个div的不同ID的显示或隐藏的div点击
<asp:Label ID="CA" runat="server" Font-Bold="False" Font-Names="Arial" Font-Size="10pt" style="padding-top:6px;" ForeColor="#CCCCCC" Height="100%" Text="Current Activities" onmouseover="var b = ChangeColorCA(); this.style.cursor='pointer'; return b" onmouseout="RemoveColorCA()"></asp:Label>
这里三个标签是所有
<div id="DIV_CA" runat=server align="center" visible="false" style="background-color:#f3f3f3; text-align: left; width: 500px; height: 470px; overflow:auto;">Some data</div>
我想DIV代码从标签点击制作显示或隐藏机制任何人都可以告诉我,我怎样才能做到这一点,当我点击一个标签,然后一个特定的div应该显示,其他人应该隐藏,当我点击下一个标签时,它的coresspondent div应该显示。
更新 这是我的脚本代码
<script type="text/javascript">
function hideshow(span) {
var div = document.getElementById("DIV_" + span.id);
if (div.style.display == "none")
div.style.display = "block";
else
div.style.display = "none";
}
</script>
这里是lablel代码
<asp:Label ID="CA" runat="server" Font-Bold="False" Font-Names="Arial" Font-Size="10pt" style="padding-top:6px;" ForeColor="#CCCCCC" Height="100%" Text="Current Activities" onmouseover="var b = ChangeColorCA(); this.style.cursor='pointer'; return b" onmouseout="RemoveColorCA()" onclick="hideshow(this)" ></asp:Label>
你可以编写JavaScript。
标记:
<asp:Label ID="CA"
runat="server"
onclick="hideshow(this)"
Text="Label">
</asp:Label>
<div id="DIV_CA"
runat=server
align="center"
style="background-color:#f3f3f3; text-align:
left; width: 500px; height: 470px; overflow:auto; display:none;">
Some data
</div>
的JavaScript:
function hideshow(span) {
var div = document.getElementById("DIV_" + span.id);
if (div.style.display == "none")
div.style.display = "block";
else
div.style.display = "none";
}
编辑:要隐藏所有div和显示特定的div。
标记:把所有<asp:Label/>
和<div>
内另一<div/>
<div id="allDiv">
<asp:Label ID="CA" runat="server" Font-Bold="False" Font-Names="Arial" Font-Size="10pt" style="padding-top:6px;" ForeColor="#CCCCCC" Height="100%" Text="Current Activities" onmouseover="this.style.cursor='pointer'; " onclick="hideshow(this)"></asp:Label>
<asp:Label ID="CB" runat="server" Font-Bold="False" Font-Names="Arial" Font-Size="10pt" style="padding-top:6px;" ForeColor="#CCCCCC" Height="100%" Text="Current Activities" onmouseover="this.style.cursor='pointer'; " onclick="hideshow(this)"></asp:Label>
<div id="DIV_CA" runat="server" align="center" style="background-color:#f3f3f3; text-align: left; width: 500px; height: 470px; overflow:auto; display:none;">Some data1</div>
<div id="DIV_CB" runat="server" align="center" style="background-color:#f3f3f3; text-align: left; width: 500px; height: 470px; overflow:auto; display:none;">Some data2</div>
</div>
的JavaScript:功能hideDiv()设置display:none
到所有子格。
<script type="text/javascript">
function hideshow(span) {
hideDiv();
span.style.fontWeight = "bold";
var div = document.getElementById("DIV_" + span.id);
if (div.style.display == "none")
div.style.display = "block";
else
div.style.display = "none";
}
function hideDiv() {
var childDiv = document.getElementById("allDiv").childNodes;
for (i = 0; i < childDiv.length; i++) {
if (childDiv[i].tagName == "DIV") {
childDiv[i].style.display = "none";
}
if (childDiv[i].tagName == "SPAN") {
childDiv[i].style.fontWeight = "normal";
}
}
}
</script>
使用这种方式的JQuery:
$("#<%= CA.ClientID %>").click(function(){
$("#<%= DIV_CA.ClientID %>").toggle();
});
我修好了,对不起 – 2012-01-07 10:35:08
看,我把“ClietID”改成了“ClientID”。这个语法错误会导致你在你的评论中出现的错误。 – 2012-01-07 10:42:22
没有什么,当用户点击标签并切换DIV时执行此代码,只需将此代码添加到脚本标记 – 2012-01-07 10:49:49
这将是正常工作:
<asp:Label CssClass="clickLabel" Text="text" ID="id1" runat="server" ClientIDMode="Static">id1</asp:Label><br/>
<div id="div_id1" class="someclass" style="color:Red; display:none;">red</div>
<br/>
<asp:Label CssClass="clickLabel" Text="text" ID="id2" runat="server" ClientIDMode="Static">id2</asp:Label><br/>
<div id="div_id2" class="someclass" style="color:blue; display:none;">blue</div>
<br/>
<asp:Label CssClass="clickLabel" Text="text" ID="id3" runat="server" ClientIDMode="Static">id3</asp:Label><br/>
<div id="div_id3" class="someclass" style="color:green; display:none;">green</div>
<script type="text/javascript">
$(document).ready(function() {
$(".clickLabel").click(function() {
var div_id = "#div_" + $(this).attr("id");
$(".someclass").not(div_id).css("display", "none");
$(div_id).css("display", "block");
});
});
</script>
NOt wroking爵士 – 2012-01-07 10:45:22
它工作fine.try新版本。它有更多的细节:) – MDP 2012-01-07 11:00:20
1)创建两个CSS类; divClass和divVisible。一个是所有的divs,另一个是可见的div。
2)通过引用JavaScript函数在标签上注册一个OnClientClick事件; showHideDiv。
3)在JavaScript函数中,隐藏所有具有可见类的div并使用标签的ID来查找并显示正确的div。
function showHideDiv(el)
{
var id = el.getAttribute('id');
var div = document.getElementById('DIV_' + id);
var hideVisibleDiv = document.getElementsByClassName('divVisible');
for(var e in hideVisibleDiv)
{
hideVisibleDivs[e].className = 'divClass';
}
div.className = 'divClass divVisible';
}
类似的东西...
,如果你在你的页面中使用更新面板必须使用此代码获取原因:
Sys.WebForms.PageRequestManager.getInstance()add_endRequest。 (AsyncPostback);
函数AsyncPostback(){//在这里插入你的代码};
因为您的JavaScript代码在一次回发后无法运行。
祝你好运!
好的检查更新 – 2012-01-07 10:55:49
是的它使所有的标签大胆,但当我点击下一个标签时没有把它们变成正常 – 2012-01-07 13:14:57
YEs我已经复制了上面的代码 – 2012-01-07 13:17:30