javascript - 使用 jquery 根据操作系统隐藏 CSS 元素

Question

我试图简单地隐藏/显示一个元素，具体取决于您使用的是 mac、windows、iphone、ipad 等。

我有 2 个 p 元素: p1 -​​ 我想在 windows 上显示 p2 - 我想在其他所有设备上显示(mac/iphone/ipad 等)

我在这里发现了一个明显检测操作系统的脚本:http://www.stoimen.com/blog/2009/07/16/jquery-browser-and-os-detection-plugin/

所以我在链接到 jquery 之后链接到脚本，并将其添加到页面头部:

if ($.client.os == 'Mac') {
    $('#download').hide(); $('#register').show();
}

if ($.client.os == 'iPhone') {
    $('#download').hide(); $('#register').show();
}

if ($.client.os == 'Windows') {
    $('#download').show(); $('#register').hide();
}

我无法让它工作，有什么想法吗？

Answer 1

This thread对您的问题有一些解决方案。鉴于您指定的属性，您需要做的就是:

if (navigator.appVersion.indexOf("Win")!=-1) {
    $('#register').hide();
    $('#download').show();
}

您不需要显式显示元素，因为客户端不会更改操作系统。只需将 #download 和 #register 的基本可见性设置为您的“默认”配置(将 #download { display: none; }在你的 CSS 中)并在必要时让 .hide() 和 .show() 覆盖它们。

如果您需要更高级的操作系统检测，您可以通过将 “Win” 替换为适当的操作系统标签来添加其他规则。

编辑 修复了 jsFiddle:http://jsfiddle.net/2G4pz/5/