jsはrouteルートを書きます.

ルートの用途:H 5をする時、すべてのページを1枚のページの中で書くことができて、ルートを通して、あなたがクリックした後に現れるページを表示します.
ルートの実現の原理:windowは傍受関数を結び付けて、urlのhash値が変化する時hashchangeの逆転をトリガすることができて、コールバックの中で異なっている操作を行って、すぐにページを更新して、それによって異なっているページを表示します.
jsコードは以下の通りです

//      newRouter  
    class newRouter {
    //        
    
    constructor() {        //    
    this.routes = {};
    this.currentUrl = '';
    }

    //    hash，    
    refresh() {
    this.currentUrl = location.hash.slice(1) || '/';          		 //location.hash  #/setting  /this.currentUrl  /setting
    this.routes[this.currentUrl] && this.routes[this.currentUrl]();    //    
    }

    //    
    init() { //                       
    window.addEventListener('load', this.refresh.bind(this), false);        //       ，  this    this     
    window.addEventListener('hashchange', this.refresh.bind(this), false);
    }

    //    URL       URL        

    route(path, callback = () => {}) {
    this.routes[path] = callback;
    }
    }

    // new    Router   
    window.Router = new newRouter();

    //        
    window.Router.init();

    Router.route('/setting', () => {
        document.querySelector(".wrap").style.display="none";
        document.querySelector(".settingWrap").style.display="block";
    });
    Router.route('/back', () => {
        document.querySelector(".wrap").style.display="block";
        document.querySelector(".settingWrap").style.display="none";
    });
    

html

これをクリックしてパスを り えます。   //    wrap
これをクリックしてまたパスを り えます。   //   settingWrap

でも、このルートは下に書いてあります.でないと、スタイルは変えられません.