html页面加入正确参数方可显示内容

杂七杂八
23年3月27日
编辑

黄小二

<html>
<head>
<title>我是标题</title>
<meta charset="UTF-8">
</head>
<body>
<div id="contenti" style="display:block;">
<p>这里不正确参数显示的内容</p>
</div>

<div id="content" style="display:none;">
    <!-- 这里是第二个div的内容 正确参数后显示在这里 -->
    <!-- 省略 -->
</div>

<script>
    // 获取查询字符串
    const queryString = window.location.search;

    // 检查是否包含参数 "123"
    if (queryString.includes("123")) {
        // 显示内容
        document.getElementById("content").style.display = "block";
        document.getElementById("contenti").style.display = "none";

    } else {
        // 隐藏内容或者给出提示
        // 省略代码
    }
</script>
</body>
</html>

这段代码是一个简单的HTML页面，它有两个div元素，其中第一个元素的id为"contenti"，第二个元素的id为"content"，而且第二个元素的样式默认情况下是被隐藏的（style="display:none;"）。这个页面还包含了一段JavaScript代码，用于检查当前页面的查询字符串中是否包含“123”的参数，如果包含，则将第二个div元素的样式改为display:block;，即显示该元素，同时将第一个div元素的样式改为display:none;，即隐藏该元素。如果查询字符串不包含“123”的参数，则不做任何操作，即第二个div元素仍然被隐藏。

需要注意的是，由于这个页面是通过浏览器的URL栏输入的地址访问的，因此查询字符串的内容是由用户手动输入在URL后面的，而不是在代码中指定的。因此，如果你想让第二个div元素被显示出来，你需要手动在URL后面添加查询字符串参数“123”，例如：http://example.com/index.html?123。