Php 基于url参数显示/隐藏页面上的多个div

正在寻找一种基于URL参数显示多个div并隐藏其余div的方法

如果产品参数为11、15或23，则显示div 1（小部件1）

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

如果产品参数为11、50或60，则显示第3部分（小部件3）

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

另一个选项可能是为与每个产品简介关联的每个div设置一个ID。这需要能够在URL中允许多个产品参数：

---

这样做的目的是让产品推荐人表单（忍者表单+条件逻辑插件）将用户发送到“推荐页面”，并根据表单输入设置URL参数。此页面将包含div，每个div包含10种产品中的一种，但它将仅显示基于表单输出的URL参数推荐的产品。欢迎任何建议来实现这一点。

您可以通过三个简单的步骤来实现所需的效果

1） 从URL中读取“产品”参数：

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页面正文中添加一个类：

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

3） 按如下方式定义div的CSS：

.div1 {
   display : none;
} 

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

---

演示 函数getParameterByName（名称、url）{ 如果（！url）url=window.location.href； name=name.replace（/[\[\]]/g，\\$&）； var regex=new RegExp（“[？&]”+name+”（=（[^&#]*）和|#|$）， 结果=regex.exec（url）； 如果（！results）返回null； 如果（！results[2]）返回“”； 返回组件（结果[2]。替换（/\+/g，”）； } var url=“website.com/？product=11”； var product=getParameterByName（“产品”，url）； document.body.className+=''+'产品'+产品

.div1、.div2、.div3{
显示：无；
} 
.product11.div1、.product15.div1、.product23.div1、，
.product33.div2、.product35.div2、.product41.div2、，
.product11.div3、.product50.div3、.product60.div3{
显示：块；
}

第一组
第二组
第三组

您可以通过三个简单的步骤实现所需的效果

1） 从URL中读取“产品”参数：

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页面正文中添加一个类：

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

3） 按如下方式定义div的CSS：

.div1 {
   display : none;
} 

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

---

演示 函数getParameterByName（名称、url）{ 如果（！url）url=window.location.href； name=name.replace（/[\[\]]/g，\\$&）； var regex=new RegExp（“[？&]”+name+”（=（[^&#]*）和|#|$）， 结果=regex.exec（url）； 如果（！results）返回null； 如果（！results[2]）返回“”； 返回组件（结果[2]。替换（/\+/g，”）； } var url=“website.com/？product=11”； var product=getParameterByName（“产品”，url）； document.body.className+=''+'产品'+产品

.div1、.div2、.div3{
显示：无；
} 
.product11.div1、.product15.div1、.product23.div1、，
.product33.div2、.product35.div2、.product41.div2、，
.product11.div3、.product50.div3、.product60.div3{
显示：块；
}

第一组
第二组
第三组

您有到目前为止尝试过的示例代码吗？gmfm-我没有。我找不到任何能够实现我所需要的目标的好例子。John Slegers下面的回答非常有效。您有到目前为止尝试过的示例代码吗？gmfm-我没有。我找不到任何能够实现我所需要的目标的好例子。约翰·斯莱格斯的回答很完美。