页面加载打开面板在HTML中使用Java脚本

page load open panel in html using java script

本文关键字：Java 脚本 HTML 加载更新时间：2023-09-26

我使用HTML代码与Java脚本和CSS。我正在做打开面板按钮点击。面板是打开的，但我想在页面加载时打开面板。如何使用调用在页面加载在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>

    $(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');
});