如何隐藏 HTML 元素，使其不出现在仅适用于桌面的其他页面上？

Question

我有一种情况，我正在通过 CMS 创建网站并使用页面包装器。页面包装器 css/html 等将应用于所有页面，因此如果我创建一个名为 "Start a Fundraiser" 的自定义按钮，该按钮将出现在所有页面上。我想知道是否有 javascript 方法或其他方法可以将它从其他页面隐藏或强制它仅出现在问候语页面中，最好只应用于桌面，就像它在手机上的显示方式一样太棒了，但如果这太复杂了，我也可以将它隐藏在移动版本的其他页面上。

Test Page <== 我的测试页面如果您转到 "Learn More" 选项卡并打开下拉菜单，“开始筹款活动”按钮会从它所在的任何位置下拉。

现在CMS确实有能力创建各种条件语句，但这是有史以来最令人困惑的事情，这里有一个例子：

Simple Tests
If the test case matches, do one thing or do nothing:
[[?xx[[S1:first_name]]xx::xxBobxx::Hi, Bob!::]]
If the first_name is Bob, render "Hi, Bob!", if not, render nothing.
If the test case matches, do one thing or do another thing:
[[?xx[[S1:first_name]]xx::xxBobxx::Hi, Bob!::Hello.]]
If the first_name is Bob, render "Hi, Bob!", if not, render "Hello."

现在有 100 多个 S-tags，其中 none 明确地说 "hide" 或类似的东西，所以要花一些时间来浏览每个，因为他们有非常通用的标题，所以同时我希望有某种解决方案来加快速度。

他们的客户服务没有帮助，哈哈，给了我上面发布的代码的链接。

EDIT 我注意到 CMS 可能使用 PHP，但是我有访问 html 文档的 none，因此我无法检查是否正在使用 php 标签。不过在页面包装器中，我可以使用此 S-tag 命令调用我需要的 HTML 文档：

[[S63:3]]

并提取所有 body 内容。所以这就是为什么我无法判断它是否正在使用 PHP 的原因。 CMS 系统称为 Luminate Online（现在归 Blackbaud 所有）

这是插入数据的外观以及页面包装器制作方式的图像。它在左侧显示 HTML Body，但它不是，它基本上是一个样式包装器，可应用于任何使用它的 html 页面，设置它的人会在其他地方创建内容无法访问，那个人已经不在我们身边了。

如果您需要任何其他信息，请随时询问！我会尽力而为！

非常感谢任何建议！谢谢你的时间。

Answer 1

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

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

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
}

我喜欢使用 $_SERVER['SCRIPT_NAME']，因为它显示的基本路径消除了 /dir/?this=that&that=this.

等动态路径的问题

Answer 2

这是一个 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' );
    }

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

如何隐藏 HTML 元素，使其不出现在仅适用于桌面的其他页面上？

How to hide an HTML element from appearing on other pages for desktop only?

html

javascript

jquery

hide