Javascript 如何隐藏HTML元素，使其不显示在仅用于桌面的其他页面上？

我有一个情况，我创建了一个网站通过CMS和使用页面包装。页面包装css/html等将应用于所有页面，因此，如果我创建一个自定义按钮，称为“启动筹款活动”，该按钮将出现在所有页面上。我想知道是否有一种javascript方法或其他东西可以将它隐藏在其他页面中，或强制它只出现在问候页面中，最好只应用于桌面，它在手机上的显示方式看起来很棒，但如果这使它过于复杂，我也可以把它隐藏在手机版的其他页面上

---

看起来您正在使用PhP，所以您可以这样做

在所有页面上显示，但“/site/TR/Events/General/”页面除外

if ($_SERVER['SCRIPT_NAME'] != '/site/TR/Events/General/index.php') {
    ///code here
}

if ($_SERVER['SCRIPT_NAME'] == '/site/TR/Events/General/index.php') {
    ///code here
}

仅在“/site/TR/Events/General/”页面上显示

if ($_SERVER['SCRIPT_NAME'] != '/site/TR/Events/General/index.php') {
    ///code here
}

if ($_SERVER['SCRIPT_NAME'] == '/site/TR/Events/General/index.php') {
    ///code here
}

---

我喜欢使用

$\u SERVER['SCRIPT\u NAME']

，因为它显示了基本路径，消除了动态路径的问题，例如

/dir/？this=that&that=this

看起来像是在使用PhP，所以可以这样做

在所有页面上显示，但“/site/TR/Events/General/”页面除外

if ($_SERVER['SCRIPT_NAME'] != '/site/TR/Events/General/index.php') {
    ///code here
}

if ($_SERVER['SCRIPT_NAME'] == '/site/TR/Events/General/index.php') {
    ///code here
}

仅在“/site/TR/Events/General/”页面上显示

if ($_SERVER['SCRIPT_NAME'] != '/site/TR/Events/General/index.php') {
    ///code here
}

if ($_SERVER['SCRIPT_NAME'] == '/site/TR/Events/General/index.php') {
    ///code here
}

---

我喜欢使用

$\u SERVER['SCRIPT\u NAME']

，因为它显示了基本路径，消除了动态路径的问题，如

/dir/？this=that&that=this

这里是一个JavaScript解决方案，假设您的按钮具有ID：

    // Set your target url
    var url = 'http://yourdomain.com/targeturl';

    if ( document.URL == url ){
        // If it is the target show the button
        document.getElementById("x").style.display = 'block';
    }else{
        // If it is not the target page hide the button
        document.getElementById("x").style.display = 'none !important';   
    }

CSS解决方案，用于隐藏除桌面以外的所有设备宽度上的按钮：

   #x {
      display: none;
   }
   @media ( min-width: 992px ) {
      #x {
         display: block;
      }
   }

确保将

“x”

更改为按钮的ID

---

以下是一个jQuery备选方案，其中包含您的特定URL和ID：

    var url = "http://convio.cancer.ca/site/TR?fr_id=21959&pg=entry";
    if ( window.location.href == url ){
        $( '#hmpgonly').css( 'display', 'block' );
    } else {
        $( '#hmpgonly').css( 'display', 'none !important' );
    }

---

在该页面上，它将显示该按钮，在所有其他页面上，它将删除该按钮。页面加载后，我在您的控制台中对此进行了测试。

这里是一个JavaScript解决方案，假设您的按钮具有ID：

    // Set your target url
    var url = 'http://yourdomain.com/targeturl';

    if ( document.URL == url ){
        // If it is the target show the button
        document.getElementById("x").style.display = 'block';
    }else{
        // If it is not the target page hide the button
        document.getElementById("x").style.display = 'none !important';   
    }

CSS解决方案，用于隐藏除桌面以外的所有设备宽度上的按钮：

   #x {
      display: none;
   }
   @media ( min-width: 992px ) {
      #x {
         display: block;
      }
   }

确保将

“x”

更改为按钮的ID

---

以下是一个jQuery备选方案，其中包含您的特定URL和ID：

    var url = "http://convio.cancer.ca/site/TR?fr_id=21959&pg=entry";
    if ( window.location.href == url ){
        $( '#hmpgonly').css( 'display', 'block' );
    } else {
        $( '#hmpgonly').css( 'display', 'none !important' );
    }

---

---

在该页面上，它将显示该按钮，在所有其他页面上，它将删除该按钮。页面加载后，我在您的控制台中对此进行了测试。

这是使用php吗？我认为对于Luminate的内置代码，它使用的是php，因为我刚刚检查了他们构建的页面，当我查看页面源代码时，其中没有一个条件代码是使用php的吗？我认为对于Luminate的内置代码，它使用的是php，因为我刚刚检查了他们构建的页面，当我查看页面源代码时，其中的条件代码没有一个是有趣的！我不熟悉php，但是我在页面包装器中调用的html主体使用的是一个s标记代码[[S63:3]]，所以可能它使用的是php，我只是不知道，因为我没有访问这些文档的权限，它只是输入数据，它就是。页面包装器也是内置的，但是它从head元素调用我的css/js，我可以将此代码应用到单独的php文档并从那里调用它吗？我更新了我的问题，提供了更多信息。尽我所能把它弄清楚。有趣！我不熟悉php，但是我在页面包装器中调用的html主体使用的是一个s标记代码[[S63:3]]，所以可能它使用的是php，我只是不知道，因为我没有访问这些文档的权限，它只是输入数据，它就是。页面包装器也是内置的，但是它从head元素调用我的css/js，我可以将此代码应用到单独的php文档并从那里调用它吗？我更新了我的问题，提供了更多信息。尽量把它说清楚。谢谢你的回答！我给环绕

的

div

一个id

hmpgonly

，并应用了代码，但没有运气再次测试代码，但向if语句添加了警报，以测试代码是否在正确的时间触发：

警报（“这是正确的页面”）和
警报（“这不是正确的页面”）看起来有什么东西干扰了js。“更多导航选项”在不应该显示的时候显示，而在移动设备中，当其被切换时，下拉菜单是可见的。哈哈，我一定是在添加代码之前弄错了什么。我必须看看接下来会发生什么，所以我修复了导航问题，警报仍然没有触发，我的jquery代码正在被调用，但由于某种原因，这个javascript代码没有。很高兴它为您工作。祝项目的其余部分好运。谢谢回答！我给环绕
的
div
一个id
hmpgonly
，并应用了代码，但没有运气再次测试代码，但向if语句添加了警报，以测试代码是否在正确的时间触发：
警报（“这是正确的页面”）和
警报（“这不是正确的页面”）看起来有什么东西干扰了js。“更多导航选项”在不应该显示的时候显示，而在移动设备中，当其被切换时，下拉菜单是可见的。哈哈，我一定是在添加代码之前弄错了什么。我必须看看接下来会发生什么，所以我修复了导航问题，警报仍然没有触发，我的jquery代码正在被调用，但由于某种原因，这个javascript代码没有。很高兴它为您工作。祝项目的其余部分好运。