10-基础-路由-js 实现路由

最新推荐文章于 2022-09-29 13:44:26 发布

weixin_30407099

最新推荐文章于 2022-09-29 13:44:26 发布

阅读量57

点赞数

原文链接：http://www.cnblogs.com/divtab/p/10940932.html

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
            float: left;
            margin-left: 10px;
        }

        a {
            text-decoration: none;
        }
    </style>
</head>

<body>
    <!--  AAA  BBB CCC  DDD  -->
    <!-- 设置导航链接 -->
    <ul>
        <li><a href="#/AAA">AAA</a></li>
        <li><a href="#/BBB">BBB</a></li>
        <li><a href="#/CCC">CCC</a></li>
        <li><a href="#/DDD">DDD</a></li>
    </ul>
    <br>
    <!-- 容器 -->
    <div id="main"></div>

    <script>
        var div = document.getElementById("main");
        // 目的: 根据不同的标识 渲染不同内容
        // -> 获取当前的标识->判断->渲染内容
        // 获取#/AAA -> 获取浏览器事件  -> BOM事件 -> location (hash)
        window.onhashchange = function () {
            // 获取hash <- location
            // console.log(location);
            var hash = location.hash; // #/BBB
            hash = hash.replace("#/", "");

            console.log(hash);
            switch (hash) {
                case "AAA":
                    div.innerText = "AAAAAAAAA"
                    break;
                case "BBB":
                    div.innerText = "BBBBBBBBB"
                    break;
                case "CCC":
                    div.innerText = "CCCCCCCCC"
                    break;
                case "DDD":
                    div.innerText = "DDDDDDDDD"
                    break;
                default:
                    break;
            }
        }
    </script>
</body>

</html>

转载于:https://www.cnblogs.com/divtab/p/10940932.html

weixin_30407099

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10-基础-路由-js 实现路由

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫