Question

我正在使用带有java脚本和css的html代码。我正在按钮click.panel打开面板，但我想在页面加载时打开面板。如何在html.becouse函数中使用页面加载调用是在页面加载时调用但是在页面加载时调用不调用如何在functions.how中转换类来解决这个问题

<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>

Answer 1

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

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

Answer 2

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

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

使用javascript在html页面加载打开面板

2 个答案: