根据Url不同锚点值做出不同的显示(类Vue.js)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo</title>
  </head>
  <body>
    <a href="#login">登陆</a>
    <a href="#register">注册</a>
    <div id="container"></div>
  </body>
  <script type="text/javascript">
    // 前端路由
    var container = document.getElementById("container");
    window.addEventListener("hashchange", function() {
      // 根据不同锚点值做出不同的显示
      switch (location.hash) {
        case "#login":
          container.innerHTML = "<h1>登陆界面</h1>";
          break;
        case "#register":
          container.innerHTML = "<h1>注册界面</h1>";
          break;
      }
    })
  </script>
</html>

转载请注明来源:开发猿 » 根据Url不同锚点值做出不同的显示(类Vue.js)

赞 (1) 打赏

觉得文章有用就打赏一下哦

支付宝扫一扫打赏

微信扫一扫打赏