官网header文件

当前页面:

(在页面中指定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); }) });

posted on 2020-01-02 23:26 zhishiyv 阅读(295) 评论(0) 编辑收藏举报

刷新页面返回顶部

官网header文件

导航

公告