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>
