H5+javascript+jQuery的单页面应用（SPA）（五）

前言

本文将优化 SPA 前端页面逻辑，

1. 登录成功后，Login 菜单转变为 Logout；
2. 点击 Logout 后，Member 页面也要退出，还原登入前的页面内容

优化前端页面

之前的文章为了方便用了静态方式编写，为了项目日后复杂度提升的时候，能有更好的兼容和实施效率，优化代码让项目更有实施弹性。

头部菜单以 Unordered List 实现

首先，修改 index.html <header><nav>。增加 nav id 及把原先的<div>内容更换成 <ul></ul>

<header>
    <nav id="headerNavigationMenu">
        <ul></ul>
    </nav>
</header>

把原来 index.css 关于 #headerNavigation div 相关的 css 全部删掉，换成如下：

#headerNavigationMenu ul{
   
    float: right;
    margin: 0; padding: 0;
    margin-right: 20px;
    cursor: pointer;
    font-weight:700;
    color:#555555ee;
}
#headerNavigationMenu ul li, #headerNavigationMenu ul span{
   
    list-style: none;
    margin: 0; padding: 0;
    float: left;
}
#headerNavigationMenu ul li.selected{
   
    font-weight: 700;
    color:#f36c01ee;
}
#headerNavigationMenu ul li.onHover{
   
    font-weight: 700;
    color:#000000;
}

最后在 index.js 里面作一下改动。因为修改的代码部分有点多，这里直接上整份 index.js 内容。可以自行比对一下：

$(function() {
   
    
    // 定义默认内容页面及菜单
    const defaultPage = "Login"
    // 定义当前选定的菜单ID
    let activeNavId = defaultPage
    
    var navIds = {
   }
    navIds.navHomeLink = "Home"
    navIds.navAboutUsLink = "AboutUs"
    navIds.navLoginLink = "Login"
    navIds.navMemberLink = "Member"
    
    // build a navigation menu link array
    // to filter out false click events from $(document).click(function(e) {})
    // if user not clicking on navigation menu, no change from displaying page
    let navItems = []
    for (let key in navIds) {
   
        navItems.push(key)
    }

    for(let key in navIds){
   
        
        $('#headerNavigationMenu ul'