根据 url 参数在页面上显示/隐藏多个 div

Question

寻找一种方法来显示多个 div，并根据 URL 参数隐藏其余的。

website.com/?product=11

如果产品参数为 11、15 或 23

，则显示 div1（小部件 1）

如果产品参数为 33、35 或 41，则显示 div2（小部件 2）

如果产品参数为 11、50 或 60

，则显示 div3（小部件 3）

注意“11”如何同时触发 Div 1 和 Div 3 显示。

其他选项可能是为与每个产品宣传相关联的每个 div 设置一个 ID。这需要能够在 URL:

中允许多个产品参数

website.com/?product=widget1,widget3

这是为了让产品推荐表（Ninja Forms + 条件逻辑附加组件）将用户发送到 "recommendations page"，并根据表单输入设置 URL 参数。此页面将包含 div 个，每个包含我们的 10 种产品之一，但它只会显示根据表单输出的 URL 参数推荐的产品。接受任何实现这一目标的建议。

Answer 1

只需三个简单的步骤，您就可以达到想要的效果。

1) 从您的 URL 中读取 "product" 参数：

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

var product = getParameterByName("product", url);

2) 在与该产品对应的 HTML 页面正文中添加 class :

document.body.className += ' ' + 'product' + product;

3) 像这样定义你的 div 的 CSS :

.div1 {
   display : none;
} 

.product11 .div1, .product15 .div1, .product23 .div1 {
   display : block;
}

演示

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

var url = "website.com/?product=11";
var product = getParameterByName("product", url);
document.body.className += ' ' + 'product' + product;

.div1, .div2, .div3 {
   display : none;
} 

.product11 .div1, .product15 .div1, .product23 .div1,
.product33 .div2, .product35 .div2, .product41 .div2,
.product11 .div3, .product50 .div3, .product60 .div3 {
   display : block;
}

<div class="div1">
  DIV1
</div>
<div class="div2">
  DIV2
</div>
<div class="div3">
  DIV3
</div>

另见 this Fiddle。

根据 url 参数在页面上显示/隐藏多个 div

Show / hide multiple divs on a page based on a url parameter

php

wordpress

url-parameters

演示