如下： http://www.aaa.com/index.html ——》访问默认页面 http://www.aaa.com/index.html?keyid=111 ——》访问特别页面1 http://www.aaa.com/index.html?keyid=222 ——》访问特别页面2

【求思路】不同链接访问同一地址显示不同页面

4 个回答

得票最新

rain

5037120243

发布于
2019-07-24 广东

更新于
2019-07-25

✓ 已被采纳

参考链接：https://www.cnblogs.com/mamim...

<!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>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
        }


        #wrap {
            width: 100%;
            height: 100%;
        }

        #wrap img {
            display: block;
            width: 200px;
            height: 250px;
        }
    </style>
</head>

<body>
    <div id="wrap"></div>
    <script type="text/x-template" id="bt1">
        <img id="bt1" src="./19034_en_1.jpg" v-show="bt1">bt1</img>

    </script>
    <script type="text/x-template" id="bt2">
        <img id="bt2" src="./微信截图_20190517093326.png">bt2</img>
</script>
    <script type="text/x-template" id="bt3">
        <img id="bt3" src="./微信截图_20190517093420.png">bt3</img>

    </script>


    <script>
        function getQueryString(name) {
            var result = window.location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
            if (result == null || result.length < 1) {
                return "";
            }
            return result[1];
        }
        var params = parseInt(getQueryString('id'));
        switch (params) {
            case 5:
                document.getElementById('wrap').innerHTML = document.getElementById('bt1').innerHTML;
                break;
            case 1:
                document.getElementById('wrap').innerHTML = document.getElementById('bt2').innerHTML;
                break;
            case 2:
                document.getElementById('wrap').innerHTML = document.getElementById('bt3').innerHTML;
                break;
        }
    </script>

</body>

</html>

这种写在页面的会使整个文件变大，又一番查询发现可以用jquery的load实现

<!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>
</head>

<body>
    <div id="wrap"></div>
  

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        function getQueryString(name) {
            var result = window.location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
            if (result == null || result.length < 1) {
                return "";
            }
            return result[1];
        }
        var params = parseInt(getQueryString('id'));
        switch (params) {
            case 5:
                $('html').load("./demo.html");
                break;
           
        }
    </script>

</body>

</html>

demo.html

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1">
  <title>my-project</title>
  <style>
    #app {
      width: 200px;
      height: 200px;
      background: skyblue;
    }
  </style>
</head>

<body>
  <div id="app"></div>
</body>