html 导航切换内容

随着导航页进行切花内容

<head>
<style>
* {padding: 0;margin: 0;
}
a {text-decoration: none;color: #ffffff;
}
.header {width: 100%;height: 100px;background-color: rgb(198, 195, 212);text-align: center;line-height: 100px;color: #865a5a;
}
.section_left {width: 16%;height: 500px;float: left;background-color: rgb(173, 145, 145);
}
.section_left ul li {list-style: none;width: 100%;height: 50px;border-bottom: 1px solid #ffffff;text-align: center;line-height: 50px;
}
.sidebar_right {width: 78%;float: right;height: 470px;background-color: rgb(105, 90, 90);margin-right: 3%;margin-top: 15px;text-align: center;line-height: 470px;border-radius: 10px;color: #e6cdcd;
}
.footer {width: 100%;height:100px;background-color: rgb(190, 195, 216);clear: both;text-align: center;line-height: 100px;color: #925959;
}
</style>
</head>
<html>
<body><header class="header"><h1>我是头部</h1></header><!-- 左侧导航栏 --><section class="section_left"><ul><li><a href="#/">这是默认菜单</a></li><li><a href="#/html">HTML学习</a></li><li><a href="#/css">CSS学习</a></li><li><a href="#/javascript">Javascript学习</a></li></ul></section><!-- 右侧内容显示区域 --><sidebar class="sidebar_right"><h1>我是默认内容</h1></sidebar><!-- 底部 --><footer class="footer"><h1>我是底部</h1></footer>
<script>
(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('/',function () {var oSidebar = document.querySelector("sidebar");oSidebar.innerHTML = '我是主页';
})oRouter2.map('/html',function () {var oSidebar = document.querySelector("sidebar");oSidebar.innerHTML = '我是html页面';
})oRouter2.map('/css',function () {var oSidebar = document.querySelector("sidebar");oSidebar.innerHTML = '我是css页面';
})oRouter2.map('/javascript',function () {var oSidebar = document.querySelector("sidebar");oSidebar.innerHTML = '我是javascript页面';
})
</script>
</body>
</html>

html 导航切换内容相关推荐

移动端导航页面html,swiper4实现移动端导航切换
本文实例为大家分享了swiper4实现移动端导航切换的具体代码,供大家参考,具体内容如下首先导入 (这里用的是Swiper 4.0.7版本) 在写入html内容商品分类手机厨具数码家纺生 ...
【React Native开发】React Native控件之DrawerLayoutAndroid抽屉导航切换组件解说(13)
转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50599951 本文出自:[江清清的博客] (一)前言 [好消息]个人 ...
微信小程序小技巧系列《一》幻灯片，tab导航切换
作者:gou-tian 来自:github 幻灯片使用微信小程序原生组件swiper实现. <swiper indicator-dots="{{indicatorDots}}&quo ...
uniapp小程序仿抖音切换内容
前言: 1,思路和方法参考站里一位大佬,但是链接找不到了. 2,使用swiper实现,只渲染3个swiper-item,每次切换时计算前后的item内容. template: swiper的高度设置为 ...
动画特效十五：网易新闻之头部导航切换效果
本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看. 这一节继续和大家探讨iOS中的动画效果,由于网易新闻中的动画效果比较多,所以我分两个章节进行介绍 ...
2020用vue实现仿美团导航切换功能和淘宝购物车功能，实现默认第一个导航显示效果?
总结:之前一直未写过同时实现跳转当前页面和跳转新页面的项目,要么是当前,要么是新页面,今天更新一个两个同时实现的项目. :相信很多人都遇到过router-link通过to跳转页面有时候会不显示内容的b ...
vue2.0实现底部导航切换效果
使用vue2.0写移动端的时候,经常会写底部导航效果,点击切换路由效果,实现图片和文字颜色切换.vue2.0也提供了很多ul框架供我们实现效果,今天就用原生的实现一个底部导航切换,直接上代码: 效果图 ...
手机版html页面左右滑动切换页面,移动端手指左右滑动切换内容demo
说在开头最近移动端做了一个手指左右滑动切换内容的效果demo; 为了表示我的无私,决定分享给诸位:(详细代码见附件) 正文先上html代码html> 穿衣助理完成整个页面ul部分是需要切 ...
jQuery导航切换功能
jQuery导航切换功能 Css ----------------------------------------------------------------------------------- ...

html 导航切换内容

html 导航切换内容相关推荐

最新文章

热门文章