jquery提取header出来作为复用的组件

header.html

<div class="container">
    <a class="navbar-brand logo" href="\index" style="float: left">
        <img src="/images/logo.png" alt="logo" height="47">
    </a>
    <ul class="nav_right ml-auto header-nav" style="display:flex;margin:0;padding:0;float: right;width:auto;height:57px;line-height:57px;vertical-align: middle;list-style: none;">
        <li class="nav-item ">
            <a href="\index">首页</a>
        </li>
        <li class="nav-item ">
            <a href="\login">登录</a>
        </li>
        <li class="nav-item">
            <a href="\boot\apply" class="btn btn-white-bordered navbar-btn">免费试用</a>
        </li>
    </ul>
</div>

header.js的代码

var url = window.location.search;
if (url.indexOf('/login' != -1)) {
    let html = `
        <li class="nav-item ">
            <a href="\index">首页</a>
        </li>
        <li class="nav-item">
            <a href="\boot\apply" class="btn btn-white-bordered navbar-btn">注册</a>
        </li>
    `;
    $('.header-nav  li').each(function() {
        $(this).remove();
    });
    $('.header-nav').html(html);
} else if (url.indexOf('/apply' != -1)) {
    let html = `
        <li class="nav-item ">
            <a href="\index">首页</a>
        </li>
        <li class="nav-item ">
            <a href="\login">登录</a>
        </li>
    `;
    $('.header-nav  li').each(function() {
        $(this).remove();
    });
    $('.header-nav').html(html);
}else{
    return;
}

文件目录

image.png

在其他文件里面引入header组件

            <div class="nav_bar"  id="header-html">
                <!-- 引入header-HTML -->
            </div>

        <script src="/js/jquery.js"></script>
        <script>
            
            $('#header-html').load('/html/header.html' , function(){
                $.getScript('/html/js/header.js');
            });

        </script>