Javascript 使用java脚本在html中加载页面打开面板_Javascript_Html_Css

Javascript 使用java脚本在html中加载页面打开面板

javascript html css

Javascript 使用java脚本在html中加载页面打开面板,javascript,html,css,Javascript,Html,Css,我正在使用带有java脚本和css的html代码。我正在单击按钮时打开面板。面板已打开，但我想在页面加载时打开面板。如何在html中使用页面加载时调用。因为函数是在页面加载时调用的，而不是在页面加载时调用的。如何转换函数中的类。如何解决此问题 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <ti

我正在使用带有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>


简易滑板
$（文档）.ready（函数（）{
$（“.btn幻灯片”）。单击（函数（）{
$（“面板”）。滑动切换（“慢速”）；
$（此）.toggleClass（“活动”）；
返回false；
});
});
身体{
保证金：0自动；
填充：0；
宽度：570px；
字体：75%/120%Arial，Helvetica，无衬线；
}
a:焦点{
大纲：无；
}
#面板{
背景：754c24；
高度：200px；
显示：无；
}
.幻灯片{
保证金：0；
填充：0；
边框顶部：实心4px#422410；
背景：url（images/btn slide.gif）无重复中心顶部；
}
.btn幻灯片{
背景：url（images/whitearrow.gif）无重复右-50px-50px；
文本对齐：居中；
宽度：144px；
高度：31px；
填充：10px 10px 0；
保证金：0自动；
显示：块；
字体：粗体120%/100%Arial，Helvetica，无衬线；
颜色：#fff；
文字装饰：无；
}
.主动{
背景位置：右12px；
}

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

    $(".btn-slide").trigger('click');
});

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

        $(".btn-slide").trigger('click');
   });