在 javascript 中显示或隐藏 div答案

【问题标题】：Show or hide a div in javascript在 javascript 中显示或隐藏 div
【发布时间】：2014-04-24 05:22:42
【问题描述】：

脚本代码：

<script type="text/javascript">
    function swap(val) {
        var elem = document.getElementById('tablepanel');
        if (val == 0) {

            elem.style.visibility = 'hidden'; 
             }
        else {
            elem.style.visibility = 'visible';
        }
    }
</script>

.aspx 代码

  <div id="tablepanel" runat="server" >
                                             <table style="width: 901px; height: 22px;">
                                             <tr>
                                                  <td align="left">
                                                           <asp:Button ID="btnBack" runat="server" Height="28px" OnClick="btnBack_Click" 
                                                             Style="cursor: pointer;" Text="&lt;&lt; Prev" ToolTip="Previous Question" 
                                                             UseSubmitBehavior="false" Width="75px" />
                                                   </td>
                                                  <td align="center">
                                                             <asp:Button ID="btnSave" runat="server" Height="28px" OnClick="btnSave_Click" 
                                                               Style="cursor: pointer;" Text="Save" ToolTip="Save Answer" 
                                                                                        UseSubmitBehavior="false" Width="75px" />
                                                                                </td>
                                                                                <td align="right">
                                                                                    <asp:Button ID="btnNext" runat="server" Height="28px" OnClick="btnNext_Click" 
                                                                                        Style="cursor: pointer;" Text="Next &gt;&gt;" ToolTip="Next Question" 
                                                                                        UseSubmitBehavior="false" Width="75px" />
                                                                                </td>
                                                                            </tr>
                                                                        </table>
                                                                        </div>

cs代码

ScriptManager.RegisterStartupScript(Page, this.GetType(), "BodyOnLoadScript",
                  string.Format("<script type=\"text/javascript\">swap({0});</script>", 0), false);

简短的代码，我无法隐藏和显示 div。谁能帮我解决错误谢谢....................... ..................................................... ..................................................... ..................................................... ..................................................... .........................

【问题讨论】：

感谢所有回答..我发现此代码适用于简单的 div（不包含任何按钮）。但是对于我的案例，按钮和表格在那里。我需要这些案例的答案.

标签： javascript jquery c#-4.0

【解决方案1】：

function swap(val) {
        var elem = document.getElementById('<%= tablepanel.ClientID %>');
        if (val == 0) {

            elem.style.display = 'none'; 
             }
        else {
            elem.style.display = 'block';
        }
    }

【讨论】：

【解决方案2】：

试试 display 属性..

       if (val == 0) {

            elem.style.display = 'none'; 
             }
        else {
            elem.style.display = 'block';
        }

【讨论】：

【解决方案3】：

在函数内部尝试jQuery函数，

function swap(val) {
        var elem = $('#table_id');
        if (val == 0) {

            elem.hide('slow'); 
             }
        else {
            elem.show('slow');
        }
    }

【讨论】：

【解决方案4】：

你需要使用ClientID，因为asp.net生成html时服务器控件的id会改变如果你有framework 4及以上，你可以使用ClientIDMode="static"来保持客户端的服务器id不变。

var elem = document.getElementById('<%= tablepanel.ClientID %>');

作为附加说明，elem.style.visibility 将空间事件保持为隐藏状态，如果您在隐藏空间时回收空间，则可以使用 elem.style.display 属性

elem.style.display = 'none';

【讨论】：

谢谢@Riturajratan。

【解决方案5】：

如果 div 不必在服务器上运行，则应删除 runat="server"。这将对服务器产生一点成本。如果你确实在服务器端使用了这个元素，你可以像 Rituraj 和 Adil 说的那样使用 ClientID。

<div id="tablepanel" >

【讨论】：