024 如何讓html引用公共的頭部和尾部（多個html文件公用一個header.html和footer.html）

前端靜態html頁面，封裝公共的頭文件（header：頂部頁眉，頂部導航欄等部分）和尾部文件（footer：CopyRight、友情鏈接等部分）

當前方法：通過load()函數，引入公共頭部和尾部文件; 

本文案例：引入通用的側邊欄

案例結構圖：

側邊欄對應的html文件代碼：

<aside class="main-sidebar">
    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">

        <!-- sidebar menu: : style can be found in sidebar.less -->
        <ul class="sidebar-menu">
            <li class="header">功能列表</li>
            <!-- 菜單 -->

            <li class="treeview">
                <a href="#">
                    <i class="fa fa-folder"></i> <span>用戶管理模塊</span>
                    <span class="pull-right-container">
                        <i class="fa fa-angle-left pull-right"></i>
                    </span>
                </a>
                <ul class="treeview-menu">

                    <li id="admin-login">
                        <a href="all-admin-login.html">
                            <i class="fa fa-circle-o"></i> 權限修改
                        </a>
                    </li>

                    <li id="admin-register">
                        <a href="all-admin-register.html">
                            <i class="fa fa-circle-o"></i> 密碼修改
                        </a>
                    </li>



                </ul>
            </li>


            <li class="treeview">
                <a href="#">
                    <i class="fa fa-pie-chart"></i> <span>數據庫管理模塊</span>
                    <span class="pull-right-container">
                        <i class="fa fa-angle-left pull-right"></i>
                    </span>
                </a>
                <ul class="treeview-menu">

                    <li id="charts-chartjs">
                        <a href="all-charts-chartjs.html">
                            <i class="fa fa-circle-o"></i> 01 基本信息
                        </a>
                    </li>

                    <li id="charts-morris">
                        <a href="all-charts-morris.html">
                            <i class="fa fa-circle-o"></i> 02 尺寸檢驗
                        </a>
                    </li>

                    <li id="charts-flot">
                        <a href="all-charts-flot.html">
                            <i class="fa fa-circle-o"></i> 03 機械性能
                        </a>
                    </li>

                    <li id="charts-inline">
                        <a href="all-charts-inline.html">
                            <i class="fa fa-circle-o"></i> 04 化學成分
                        </a>
                    </li>

                    <li id="charts-manager">
                        <a href="all-charts-inline.html">
                            <i class="fa fa-circle-o"></i> 05 檢測結果
                        </a>
                    </li>

                </ul>
            </li>


            <li class="treeview">
                <a href="#">
                    <i class="fa fa-laptop"></i> <span>質量證明書管理模塊</span>
                    <span class="pull-right-container">
                        <i class="fa fa-angle-left pull-right"></i>
                    </span>
                </a>
                <ul class="treeview-menu">

                    <li id="elements-general">
                        <a href="all-elements-general.html">
                            <i class="fa fa-circle-o"></i> 標准 General
                        </a>
                    </li>

                    <li id="elements-icons">
                        <a href="all-elements-icons.html">
                            <i class="fa fa-circle-o"></i> 圖標 Icons
                        </a>
                    </li>

                    <li id="elements-buttons">
                        <a href="all-elements-buttons.html">
                            <i class="fa fa-circle-o"></i> 按鈕 Buttons
                        </a>
                    </li>

                    <li id="elements-sliders">
                        <a href="all-elements-sliders.html">
                            <i class="fa fa-circle-o"></i> 滑塊 Sliders
                        </a>
                    </li>

                    <li id="elements-timeline">
                        <a href="all-elements-timeline.html">
                            <i class="fa fa-circle-o"></i> 時間線 Timeline
                        </a>
                    </li>

                    <li id="elements-modals">
                        <a href="all-elements-modals.html">
                            <i class="fa fa-circle-o"></i> 對話框樣式 Modals
                        </a>
                    </li>

                    <li id="elements-widgets">
                        <a href="all-elements-widgets.html">
                            <i class="fa fa-circle-o"></i> 窗體小部件 widgets
                        </a>
                    </li>

                </ul>
            </li>


            <li class="treeview">
                <a href="#">
                    <i class="fa fa-edit"></i> <span>表單 Forms</span>
                    <span class="pull-right-container">
                        <i class="fa fa-angle-left pull-right"></i>
                    </span>
                </a>
                <ul class="treeview-menu">

                    <li id="form-general">
                        <a href="all-form-general.html">
                            <i class="fa fa-circle-o"></i> 基礎表單元素
                        </a>
                    </li>

                    <li id="form-advanced">
                        <a href="all-form-advanced.html">
                            <i class="fa fa-circle-o"></i> 高級表單元素
                        </a>
                    </li>

                    <li id="form-editors">
                        <a href="all-form-editors.html">
                            <i class="fa fa-circle-o"></i> 編輯器
                        </a>
                    </li>

                </ul>
            </li>


            <li class="treeview">
                <a href="#">
                    <i class="fa fa-table"></i> <span>表格 tables</span>
                    <span class="pull-right-container">
                        <i class="fa fa-angle-left pull-right"></i>
                    </span>
                </a>
                <ul class="treeview-menu">

                    <li id="tables-simple">
                        <a href="all-tables-simple.html">
                            <i class="fa fa-circle-o"></i> 簡單表格
                        </a>
                    </li>

                    <li id="tables-data">
                        <a href="all-tables-data.html">
                            <i class="fa fa-circle-o"></i> 數據表格
                        </a>
                    </li>

                </ul>
            </li>

        </ul>
    </section>
    <!-- /.sidebar -->
</aside>

部分截圖：

要引入側邊欄的html文件中添加如下代碼：

在相應的位置添加側邊欄代碼：

<script>
    $(function(){
        /*公共部分
         * 導航欄
         * footer CopyRight
         */
        $(".adminsidebar").load("adminsidebar.html");

    });
</script>

效果圖：