2

我正在使用带有 java 脚本和 css 的 html 代码。我正在单击按钮打开面板。面板已打开，但我想在页面加载时打开面板。如何在html中使用页面加载时调用。因为函数是在页面加载时调用但调用不是在页面加载时调用如何转换函数中的类。如何解决这个问题

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Simple Slide Panel</title>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $(".btn-slide").click(function() {
                    $("#panel").slideToggle("slow");
                    $(this).toggleClass("active");
                    return false;
                });
            });
        </script>
        <style type="text/css">
            body {
                margin: 0 auto;
                padding: 0;
                width: 570px;
                font: 75%/120% Arial, Helvetica, sans-serif;
            }
            a:focus {
                outline: none;
            }
            #panel {
                background: #754c24;
                height: 200px;
                display: none;
            }
            .slide {
                margin: 0;
                padding: 0;
                border-top: solid 4px #422410;
                background: url(images/btn-slide.gif) no-repeat center top;
            }
            .btn-slide {
                background: url(images/white-arrow.gif) no-repeat right -50px -50px;
                text-align: center;
                width: 144px;
                height: 31px;
                padding: 10px 10px 0 0;
                margin: 0 auto;
                display: block;
                font: bold 120%/100% Arial, Helvetica, sans-serif;
                color: #fff;
                text-decoration: none;
            }
            .active {
                background-position: right 12px;
            }
        </style>
    </head>
    <body>
        <div id="panel">
            <!-- you can put content here -->
        </div>
        <p class="slide"><a href="#" class="btn-slide">Slide Panel</a>
        </p>
    </body>
</html>
4

2 回答 2

1 
$(document).ready(function(){
    $(".btn-slide").click(function(){
        $("#panel").slideToggle("slow");
        $(this).toggleClass("active"); 
        return false;
    });  

    $(".btn-slide").trigger('click');
});
于 2013-03-23T06:04:25.277 回答
1 
    $(document).ready(function(){
        $(".btn-slide").click(function(){
            $("#panel").slideToggle("slow");
          $(this).toggleClass("active"); 
            return false;
        });  

        $(".btn-slide").trigger('click');
   });
于 2013-03-23T10:38:58.777 回答