none
利用JQuery实现单击一个Button显示或隐藏一个div RRS feed

  • 问题

  • 我想利用JQuery实现单击一个Button显示或隐藏一个div。
    我的想法就是单击Button为Div添加或删除用于隐藏的class。

    以下是HTML部分代码:
    <form id="form1" runat="server">
        <div>
       
            <table class="style1">
                <tr>
                    <td>
                        <input id="btnShow" type="button" value="button" /> </td>
                    <td>
                        &nbsp; </td>
                </tr>
                <tr>
                    <td>
                        <div id="divContent">
                            asdfasdfasdfasdfasdfasdfasdfasddddddddddddddddddddd <br />
                            dddddddddddddddddddddddddddddddsssssssssssss <br />
                            ssssssseeeeeeeeeeeeewwwwwwwwwwqqqqqqqqqqqqqq <br />
                        </div>
                    </td>
                    <td>
                        &nbsp; </td>
                </tr>
            </table>
       
        </div>
    </form>


    以下是CSS部分代码:
    .hideclass
    {
    display:none;
    }


    JQuery的代码是这样写的:
    $(document).ready(function()
    {
        $("#btnShow").click(function()
        {     
            if( $("#divContent").hasClass("hideclass") )
            {
                $("#divContent").removeClass("hideClass");
            }
            else
            {
                $("#divContent").addClass("hideClass");
            }   
        });
    });


    在点击后总是在if语句这行报出错误:
    对象不支持此属性或方法
    可是在JQuery的帮助文档上是有hasClass()方法的。
    请大侠帮我看看,哪有问题?
    2009年4月11日 2:25

答案

  • 请下载最新的jquery-1.3.2版本,此版本经测试,没有出现你说的问题

    测试代码:

    <style>
    .hideclass 
    { 
    display:none; 
    } 
    
    </style>
    <script src="jquery-1.3.2.min.js"></script>
    <form id="form1" runat="server"> 
        <div> 
        
            <table class="style1"> 
                <tr> 
                    <td> 
                        <input id="btnShow" type="button" value="button" /> </td> 
                    <td> 
                        &nbsp; </td> 
                </tr> 
                <tr> 
                    <td> 
                        <div id="divContent"> 
                            asdfasdfasdfasdfasdfasdfasdfasddddddddddddddddddddd <br /> 
                            dddddddddddddddddddddddddddddddsssssssssssss <br /> 
                            ssssssseeeeeeeeeeeeewwwwwwwwwwqqqqqqqqqqqqqq <br /> 
                        </div> 
                    </td> 
                    <td> 
                        &nbsp; </td> 
                </tr> 
            </table> 
        
        </div> 
    </form>
    <script>
    $(document).ready(function() 
    { 
        $("#btnShow").click(function() 
        {      
            if( $("#divContent").hasClass("hideclass") ) 
            { 
                $("#divContent").removeClass("hideClass"); 
            } 
            else 
            { 
                $("#divContent").addClass("hideClass"); 
            }    
        }); 
    }); 
    
    </script>



    孟宪会
    2009年4月11日 2:56
    版主

全部回复

  • 请下载最新的jquery-1.3.2版本,此版本经测试,没有出现你说的问题

    测试代码:

    <style>
    .hideclass 
    { 
    display:none; 
    } 
    
    </style>
    <script src="jquery-1.3.2.min.js"></script>
    <form id="form1" runat="server"> 
        <div> 
        
            <table class="style1"> 
                <tr> 
                    <td> 
                        <input id="btnShow" type="button" value="button" /> </td> 
                    <td> 
                        &nbsp; </td> 
                </tr> 
                <tr> 
                    <td> 
                        <div id="divContent"> 
                            asdfasdfasdfasdfasdfasdfasdfasddddddddddddddddddddd <br /> 
                            dddddddddddddddddddddddddddddddsssssssssssss <br /> 
                            ssssssseeeeeeeeeeeeewwwwwwwwwwqqqqqqqqqqqqqq <br /> 
                        </div> 
                    </td> 
                    <td> 
                        &nbsp; </td> 
                </tr> 
            </table> 
        
        </div> 
    </form>
    <script>
    $(document).ready(function() 
    { 
        $("#btnShow").click(function() 
        {      
            if( $("#divContent").hasClass("hideclass") ) 
            { 
                $("#divContent").removeClass("hideClass"); 
            } 
            else 
            { 
                $("#divContent").addClass("hideClass"); 
            }    
        }); 
    }); 
    
    </script>



    孟宪会
    2009年4月11日 2:56
    版主
  • 谢谢大侠。
    慢慢来,不着急。
    2009年4月11日 2:58
  • 又出现了新的问题:
    我在点击Button后为什么网页没有反映啊?


    做最好的自己
    2009年4月11日 4:29