[英]Show or Hide div from label Click
I have three labels having folowing code on all with different ids and three divs with different ids 我有三个标签,每个标签都具有不同的ID,三个div具有不同的ID
<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>
here is div code for all 这是所有的div代码
<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>
I want to make a show or hide mechanism from label click can anyone tell me how can i do this that when i click a label then the a specific div should show and others should hide and when i click next label the its coresspondent div should show. 我想通过标签单击显示或隐藏机制,有人可以告诉我如何做到这一点,当我单击标签时,应该显示特定的div,而其他人应该隐藏,当我单击下一个标签时,其corespondent div应该显示。
UPdate This is My Script Code UPdate这是我的脚本代码
<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>
and here is lablel code 这是标签代码
<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>
You can write JavaScript. 您可以编写JavaScript。
Markup: 标记:
<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: 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";
}
EDIT: To hide all divs and show a specific div. 编辑:隐藏所有div并显示特定的div。
Markup: put all <asp:Label/>
and <div>
inside another <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: function hideDiv() set display:none
to all child div. JavaScript:函数hideDiv()将display:none
设置为所有子div。
<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>
use this way in JQuery: 在JQuery中使用这种方式:
$("#<%= CA.ClientID %>").click(function(){
$("#<%= DIV_CA.ClientID %>").toggle();
});
It will be works fine : 会很好的:
<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>
1) Create two CSS classes; 1)创建两个CSS类; divClass and divVisible. divClass和divVisible。 One is for all the divs and the other is for the visible div. 一个用于所有div,另一个用于可见的div。
2) Register an OnClientClick event on the Label(s) with a reference to a JavaScript function; 2)使用对JavaScript函数的引用在Label上注册OnClientClick事件; showHideDiv. showHideDiv。
3) In the JavaScript function, hide all divs with the visible class and use the ID of the Label to find and show the correct div. 3)在JavaScript函数中,隐藏所有带有可见类的div,并使用Label的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';
}
Something like that... 像这样
if you use update panel in your page you must use this code to get reason: 如果您在页面中使用更新面板,则必须使用以下代码来获取原因:
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(AsyncPostback); Sys.WebForms.PageRequestManager.getInstance()。add_endRequest(AsyncPostback);
function AsyncPostback() { //insert your code here }; 函数AsyncPostback(){//在此处插入代码};
because your javascript code can not run after one postback. 因为您的JavaScript代码一次回发后无法运行。
Good luck! 祝好运!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.