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 导航切换内容

猜你喜欢
