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

Question

我有一种情况，我正在通过 CMS 创建网站并使用页面包装器。页面包装器 css/html 等将应用于所有页面，因此如果我创建一个名为“开始筹款事件”的自定义按钮，该按钮将出现在所有页面上。我想知道是否有一个 javascript 方法或其他方法可以将它从其他页面隐藏或强制它只出现在问候页面中，最好只应用于桌面，就像它在手机上显示的那样看起来很棒，但如果这让它变得过于复杂，我也可以将它隐藏在移动版本的其他页面上。

Test Page <== 我的测试页面在这里，如果您转到“了解更多”选项卡并打开下拉菜单，“开始筹款事件”按钮会从它所在的任何位置下拉。

现在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-tag，没有一个专门说“隐藏”或类似的东西，所以我花了一些时间来浏览每个 S-tag，因为它们的标题非常通用，所以与此同时我希望有某种解决方案来加快速度。

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

编辑 我注意到 CMS 可能使用 PHP，但是我无法访问任何 html 文档，所以我不能检查是否正在使用 php 标签。不过在页面包装器中，我可以使用这个 S-tag 命令调用我需要的 HTML 文档:

[[S63:3]]

它会拉取所有正文内容。所以这就是为什么我无法判断它是否使用 PHP 的原因。 CMS 系统称为 Luminate Online(现在归 Blackbaud 所有)

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

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

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

Answer 1

这是一个 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。

---

这是一个带有您的特定 URL 和 ID 的 jQuery 替代方案:

    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' );
    }

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