javascript入门实例：实现简单网页功能 |
您所在的位置：网站首页 › JavaScript网页制作一个不断重复的加载动画 › javascript入门实例：实现简单网页功能 |
javascript入门实例：实现简单网页功能
|
这两天做了一个简单的小网页，由于是初次接触HTML5和CSS，只实现了最基本的功能，后续会再对功能样式进行填充优化，这里记录一下。 实现效果：可通过切换上面的导航栏实现左侧导航栏的切换，并通过左侧导航栏的切换实现右侧具体导航内容的展示。 PostManagementSystem 活动动态 职工福利This is Activity Dynamics! This is Employee benefits! This is Football! This is BasketBall! This is Badminton! This is Yoga! This is Suggestions! This is Questionnaire! Copyright www.bbcc.cn (function(){ var Router = function () { this.routes = {};//保存路由 this.curUrl = '';//获取当前的hash值 } Router.prototype.init = function () { //hashchange事件，当hash变化时，调用reloadPage方法 //第一个this指向window，bind里面的this指向调用这个函数的对象，具体使用方法可以百度 window.addEventListener('hashchange', this.reloadPage.bind(this)); } Router.prototype.reloadPage = function () { this.curUrl = location.hash.substring(1) || '/';//获取当前hash的值（去掉#） this.routes[this.curUrl](); //运行当前hsah值对应的函数 } Router.prototype.map = function( key, callback ){ //保存路由对应的函数： this.routes[key] = callback; //key表示hash的值（去掉#），callback表示当前hash对应的函数 } window.oRou = Router; }) (function(){ var Router = function () { this.routes = {};//保存路由 this.curUrl = '';//获取当前的hash值 } Router.prototype.init = function () { //hashchange事件，当hash变化时，调用reloadPage方法 //第一个this指向window，bind里面的this指向调用这个函数的对象，具体使用方法可以百度 window.addEventListener('hashchange', this.reloadPage.bind(this)); } Router.prototype.reloadPage = function () { this.curUrl = location.hash.substring(1) || '/';//获取当前hash的值（去掉#） this.routes[this.curUrl](); //运行当前hsah值对应的函数 } Router.prototype.map = function( key, callback ){ //保存路由对应的函数： this.routes[key] = callback; //key表示hash的值（去掉#），callback表示当前hash对应的函数 } window.oRou = Router; }) var oRouter2 = new oRou(); oRouter2.init(); oRouter2.map('/DefaultPage',function () { var leftNav = document.getElementById("sidebar_left"); var sendInfoControl = document.getElementById("SendInfo").innerHTML; leftNav.innerHTML = sendInfoControl; }) oRouter2.map('/SendInfo',function () { var leftNav = document.getElementById("sidebar_left"); var sendInfoControl = document.getElementById("SendInfo").innerHTML; leftNav.innerHTML = sendInfoControl; var rightNav = document.getElementById("sidebar_right"); var ActivityDynamicControl = document.getElementById("ActivityDynamics").innerHTML; rightNav.innerHTML = ActivityDynamicControl; }) oRouter2.map('/Club',function () { var leftNav = document.getElementById("sidebar_left"); var clubControl = document.getElementById("Club").innerHTML; leftNav.innerHTML = clubControl; var rightNav = document.getElementById("sidebar_right"); var footBallControl = document.getElementById("FootBall").innerHTML; rightNav.innerHTML = footBallControl; }) oRouter2.map('/Appraisal',function () { var leftNav = document.getElementById("sidebar_left"); var appraisalControl = document.getElementById("Appraisal").innerHTML; leftNav.innerHTML = appraisalControl; var rightNav = document.getElementById("sidebar_right"); var suggestionsControl = document.getElementById("Suggestions").innerHTML; rightNav.innerHTML = suggestionsControl; }) oRouter2.map('/ActivityDynamic',function () { var rightNav = document.getElementById("sidebar_right"); var ActivityDynamicControl = document.getElementById("ActivityDynamics").innerHTML; rightNav.innerHTML = ActivityDynamicControl; }) oRouter2.map('/EmployeeBenefits',function () { var rightNav = document.getElementById("sidebar_right"); var employeeBenefitsControl = document.getElementById("Employeebenefits").innerHTML; rightNav.innerHTML = employeeBenefitsControl; }) oRouter2.map('/FootBall',function () { var rightNav = document.getElementById("sidebar_right"); var footBallControl = document.getElementById("FootBall").innerHTML; rightNav.innerHTML = footBallControl; }) oRouter2.map('/BasketBall',function () { var rightNav = document.getElementById("sidebar_right"); var basketBallControl = document.getElementById("BasketBall").innerHTML; rightNav.innerHTML = basketBallControl; }) oRouter2.map('/Badminton',function () { var rightNav = document.getElementById("sidebar_right"); var badmintonControl = document.getElementById("Badminton").innerHTML; rightNav.innerHTML = badmintonControl; }) oRouter2.map('/Yoga',function () { var rightNav = document.getElementById("sidebar_right"); var yogaControl = document.getElementById("Yoga").innerHTML; rightNav.innerHTML = yogaControl; }) oRouter2.map('/Suggestions',function () { var rightNav = document.getElementById("sidebar_right"); var SuggestionsControl = document.getElementById("Suggestions").innerHTML; rightNav.innerHTML = SuggestionsControl; }) oRouter2.map('/Questionnaire',function () { var rightNav = document.getElementById("sidebar_right"); var QuestionnaireControl = document.getElementById("Questionnaire").innerHTML; rightNav.innerHTML = QuestionnaireControl; }) |
代码如下：【本文地址】
今日新闻 |
推荐新闻 |