当前页面:
(在页面中指定class值为header的页面元素，导入header.js对文档进行操作)
<body>
<section class="header">
</section>
<script src="../js/xxx/header.js"></script>
</body>
header.js
/** * 官网--公共头部 */ $(document).ready(function () { //class值为header的元素 var headerEle = $(".header"); // 当前路径 var pathArr = location.pathname.split('/'); var currentHref = pathArr[pathArr.length - 1]; // headerTmpl中的头部内容 var headerTmpl = ` <div class="header-box"> <img src="../assets/img/logo@2x.png" class="logo-img" /> <div class="tab-list"> <div class="tab-item header-item" id="indexPage" data-href="webside.html">首页</div> <div class="tab-item header-item" id="productServicePage" data-href="productService.html">aaa</div> <div class="tab-item header-item" id="financialLeasePage" data-href="financialLease.html">bbb</div> <div class="tab-item header-item" id="solutionsPage" data-href="solutions.html">ccc</div> <div class="tab-item header-item" id="projectPage" data-href="project.html">ddd</div> <div class="tab-item header-item" id="newsPage" data-href="newsList.html">eee</div> <div class="tab-item header-item" id="aboutUsPage" data-href="aboutUs.html">fff</div> </div> </div> `; // 在元素中添加页面内容 headerEle.html(headerTmpl); // 令class值为header-item的类新增class值为active $(".header-item").removeClass("active"); switch (currentHref) { case 'webside.html': //index $("#indexPage").addClass("active") break; case 'productService.html': //aaa $("#productServicePage").addClass("active") break; case 'newsList.html': //bbb $("#newsPage").addClass("active") break; case 'aboutUs.html': //ccc $("#aboutUsPage").addClass("active") break; case 'financialLease.html': //ddd $("#financialLeasePage").addClass("active") break; case 'solutions.html': //eee $("#solutionsPage").addClass("active") break; case 'project.html': //fff $("#projectPage").addClass("active") break; default: break; }; $(".header-item").click(function(e) { // 事件源 e var href = e.currentTarget.dataset.href; if(href === currentHref) { console.log("页面相同"); return; } //location.href是相对于当前路径的页面查找？目前看是这样的... location.href = location.href.replace(currentHref, href); }) });
头部样式
/*** * 头部导航栏 */ .header { .header-box { display: flex; margin: 0 110px 0 90px; height: 80px; justify-content: space-between; align-items: center; background-color: transparent; position: absolute; top: 0; left: 0; right: 0; z-index: 9; .logo-img { width: 111px; height: 30px; } .tab-list { display: flex; width: 607px; justify-content: space-between; align-items: center; font-size: 16px; color: #fff; //font-weight: lighter; font-family: PingFangSC-Light; .tab-item { padding: 6px 6px; line-height: 28px; cursor: pointer; &.active { position: relative; } &.active::before { content: ''; display: block; width: 12px; height: 1px; background-color: #050711; position: absolute; bottom: 0; left: 20%; z-index: 2; } &.active::after { content: ''; display: block; width: 35px; transform: translateX(-50%); height: 1px; background-color: #ea5920; position: absolute; left: 60%; bottom: 0; } } } } }
页面效果：
/**
* 官网--公共头部
*/
$(document).ready(function () {
//class值为header的元素
var headerEle = $(".header");
// 当前路径
var pathArr = location.pathname.split('/');
var currentHref = pathArr[pathArr.length - 1];
// headerTmpl中的头部内容
var headerTmpl = `
<div class="header-box">
<img src="../assets/img/logo@2x.png" class="logo-img" />
<div class="tab-list">
<div class="tab-item header-item" id="indexPage" data-href="webside.html">首页</div>
<div class="tab-item header-item" id="productServicePage" data-href="productService.html">aaa</div>
<div class="tab-item header-item" id="financialLeasePage" data-href="financialLease.html">bbb</div>
<div class="tab-item header-item" id="solutionsPage" data-href="solutions.html">ccc</div>
<div class="tab-item header-item" id="projectPage" data-href="project.html">ddd</div>
<div class="tab-item header-item" id="newsPage" data-href="newsList.html">eee</div>
<div class="tab-item header-item" id="aboutUsPage" data-href="aboutUs.html">fff</div>
</div>
</div>
`;
// 在元素中添加页面内容
headerEle.html(headerTmpl);
// 令class值为header-item的类新增class值为active
$(".header-item").removeClass("active");
switch (currentHref) {
case 'webside.html':
//index
$("#indexPage").addClass("active")
break;
case 'productService.html':
//aaa
$("#productServicePage").addClass("active")
break;
case 'newsList.html':
//bbb
$("#newsPage").addClass("active")
break;
case 'aboutUs.html':
//ccc
$("#aboutUsPage").addClass("active")
break;
case 'financialLease.html':
//ddd
$("#financialLeasePage").addClass("active")
break;
case 'solutions.html':
//eee
$("#solutionsPage").addClass("active")
break;
case 'project.html':
//fff
$("#projectPage").addClass("active")
break;
default:
break;
};
$(".header-item").click(function(e) {
// 事件源 e
var href = e.currentTarget.dataset.href;
if(href === currentHref) {
console.log("页面相同");
return;
}
//location.href是相对于当前路径的页面查找？目前看是这样的...
location.href = location.href.replace(currentHref, href);
})
});