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

前言

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

登录成功后，Login 菜单转变为 Logout；
点击 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"// 定义当前选定的菜单IDlet activeNavId = defaultPagevar 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 pagelet navItems = []for (let key in navIds) {navItems.push(key)}for(let key in navIds){$('#headerNavigationMenu ul'

H5+javascript+jQuery的单页面应用（SPA）（五）相关推荐

单页面应用(SPA)前端路由hash 模式 VS history 模式
文章目录单页面应用(SPA) 前端路由的由来前端路由 hash 模式 history 模式 hash.history优缺点单页面应用(SPA) 简单的说 SPA 就是一个WEB项目只有一个 HT ...
使用Vue.js在WordPress中创建单页面应用SPA
吐槽一下,掘金好像并不能插入gist的代码框效果有点打折扣博客原文地址里有gist代码: 使用Vue.js在WordPress中创建单页面应用SPA 英文原文地址:premium.wpmudev. ...
单页面应用SPA的优缺点
单页面应用SPA的优缺点
单页面应用——SPA
单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用. 它将所有的活动局限于一个web页面中,仅在该web页面初始化时加载相应的HTML. ...
多页面（MPA）开发 VS 单页面（SPA）开发
前端方面: jQuery + Bootstrap 多页面应用: 优点: 数据可以直接渲染,对于搜索引擎(SEO)友好 BootStrap 对移动端和PC端界面展示都很友好后期维护方便,成本低,易上手 ...
H5中的history单页面，手动实现单页面开发，细说h5单页面原理
就目前来看,前端的单页面开发占了很大一部分,一方面无刷新的切换增强了体验,并且浏览器记录依然存在,前进后退都没问题,在之前我们通地址栏中的hash改变来触发onhashchange方法来实现单页面应用 ...
前端单页面（SPA）和多页面（MPA）
了解单页面和多页面应用程序单页面和多页面 SPA:( Single Page Application ) 单页面应用程序,例如:后台管理系统,整个应用中只有一个页面(index.html) MPA ...
H5单页面应用(SPA)架构总结
一: 前端部分 1. 架构图 2. 原由去年疫情期间在家没事, 想着写一个商城项目沉淀一下自己这些年所学的知识. 经过了一年多的反复改版, 优化, 最终做成了现在这样一个有衡量标准的东西. 这期间走 ...
JavaScript/jQuery 表单美化插件小结
Niceforms Niceforms是一款独立的表单美化工具,当前版本为2.0 官方主页:http://www.emblematiq.com/lab/niceforms/ 官方演示:http://w ...
Javascript(jQuery)中绑定页面上所有按钮点击事件的几种方式
方法一:使用document对象查找所有的按钮 //按照dom的方式添加事件处理function BindByDom() {try{var htmlBtns = document.getElement ...

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

前言

优化前端页面

头部菜单以 Unordered List 实现

H5+javascript+jQuery的单页面应用（SPA）（五）相关推荐

最新文章

热门文章