支持非Javascript用户-JQuery幻灯片

我目前正在使用

display:none

隐藏我网站上的所有div。用户点击“info”或“contact”，相应的div将通过JQuery向下滑动。为了支持不使用Javascript的用户，如果未启用Javascript，链接将转到“info.php”和“contact.php”

这是一个相当麻烦的维护，因为当我进行任何更改时，我必须同时更新主页和非javascript版本（info.php、contact.php等）

---

对于没有Javascript的用户来说，什么是对JQuery滑动div的合理备份

当我正确理解您的意思时，用静态内容创建一个php文件。（所有站点上的内容）并根据GET参数（如“页面”）包含另一个文件中每个包含的内容（信息/联系人）。

当我正确理解您的意思时，使用静态内容制作一个php文件。（所有站点上的内容）并根据GET参数（如“页面”）包含另一个文件中每个包含的内容（信息/联系人）。

在包含文件中包含您的info.php主文本。比如说info.inc.php

当非js用户单击链接时，他们会转到info.php，其中包含了include文件

但是当js用户单击链接时，您将info.inc.php加载到您的div中，然后用jquery显示它

说

---

当您需要更新内容时，只需更新include文件。

将info.php主文本保存在include文件中。比如说info.inc.php

当非js用户单击链接时，他们会转到info.php，其中包含了include文件

但是当js用户单击链接时，您将info.inc.php加载到您的div中，然后用jquery显示它

说

当您需要更新内容时，只需更新include文件。

使用jQuery隐藏

s，这样没有JavaScript的用户仍然可以在一个长页面中看到所有

s。另一方面，使用JavaScript的用户可以像往常一样滑动

s

• jQuery是JavaScript-不能是备份计划
• 我们不能简单地互换使用JavaScript和jQuery这两个术语

jQuery是一个JavaScript库。通过禁用JavaScript，jQuery脚本将无法隐藏

s。关键是在JavaScript不可用时保持它的功能。只要您不对页面执行关键操作，使其在没有JavaScript的情况下无法正常工作，您就可以满足这些非JavaScript用户的需求。在这种情况下，将修改工作交给jQuery（或JavaScript）是一种保留功能的方法。

使用jQuery隐藏

s，这样没有JavaScript的用户仍然可以在一个长页面中看到所有

s。另一方面，使用JavaScript的用户可以像往常一样滑动

s

• jQuery是JavaScript-不能是备份计划
• 我们不能简单地互换使用JavaScript和jQuery这两个术语

---

jQuery是一个JavaScript库。通过禁用JavaScript，jQuery脚本将无法隐藏

s。关键是在JavaScript不可用时保持它的功能。只要您不对页面执行关键操作，使其在没有JavaScript的情况下无法正常工作，您就可以满足这些非JavaScript用户的需求。在这种情况下，将修改工作交给jQuery（或JavaScript）是一种保留功能的方法。

首先添加一个类

，以隐藏所有div，当JavaScript被激活时应该隐藏这些div

最简单的方法是在页面加载时像这样隐藏div：

$(document).ready(function() {
    $('.to_hide').hide();
});

请注意，如果执行此操作，加载时布局将闪烁（首先显示完整内容，然后隐藏动态div）

为了避免闪烁，您可以为
添加css规则，以动态隐藏
类。使用
中的以下功能执行此操作：

function dyn_css_rule(sSelector, sCssText) {
    try {
        var aSS = document.styleSheets;
        var i;
        for (i=aSS.length-1; i>=0; i--) {
            var oCss = document.styleSheets[i];
            var sMedia = (typeof(oCss.media) == "string")?
                oCss.media:
                oCss.media.mediaText;
            if (!sMedia
                || sMedia.indexOf("screen") != -1
                || sMedia.indexOf("all") != -1
            ) {
                break;
            }
        }
        if (oCss.insertRule) {
            oCss.insertRule(sSelector + " {" + sCssText + "}", oCss.cssRules.length);
        } else if (oCss.addRule) {
            oCss.addRule(sSelector, sCssText);
        }
    } catch(err) {
        var tag = document.createElement('style');
        tag.type = 'text/css'; 
        try {
            tag.innerHTML = sSelector + " {" + sCssText + "}";
        } catch(err) {
            tag.innerText = sSelector + " {" + sCssText + "}";
        }
        document.getElementsByTagName('head')[0].appendChild(tag);
    }
    return sSelector + "{" + sCssText + "}";
};

dyn_css_rule('.to_hide', 'display: none');

首先，将类
添加到所有div中，当激活javascript时，这些div应该被隐藏

最简单的方法是在页面加载时像这样隐藏div：

$(document).ready(function() {
    $('.to_hide').hide();
});

请注意，如果执行此操作，加载时布局将闪烁（首先显示完整内容，然后隐藏动态div）

为了避免闪烁，您可以为
添加css规则，以动态隐藏
类。使用
中的以下功能执行此操作：

function dyn_css_rule(sSelector, sCssText) {
    try {
        var aSS = document.styleSheets;
        var i;
        for (i=aSS.length-1; i>=0; i--) {
            var oCss = document.styleSheets[i];
            var sMedia = (typeof(oCss.media) == "string")?
                oCss.media:
                oCss.media.mediaText;
            if (!sMedia
                || sMedia.indexOf("screen") != -1
                || sMedia.indexOf("all") != -1
            ) {
                break;
            }
        }
        if (oCss.insertRule) {
            oCss.insertRule(sSelector + " {" + sCssText + "}", oCss.cssRules.length);
        } else if (oCss.addRule) {
            oCss.addRule(sSelector, sCssText);
        }
    } catch(err) {
        var tag = document.createElement('style');
        tag.type = 'text/css'; 
        try {
            tag.innerHTML = sSelector + " {" + sCssText + "}";
        } catch(err) {
            tag.innerText = sSelector + " {" + sCssText + "}";
        }
        document.getElementsByTagName('head')[0].appendChild(tag);
    }
    return sSelector + "{" + sCssText + "}";
};

dyn_css_rule('.to_hide', 'display: none');

纯CSS解决方案

这可能有效，也可能无效，这取决于具体情况，但实际上，您可以使用IE8及更高版本中的css选择器模拟下拉菜单的行为。单击菜单，只要您将鼠标悬停在内容周围，内容就会出现，不需要javascript

功能性

默认情况下，所有内容都是隐藏的。但是，由于：active伪类，您可以在单击父对象时更改要显示的内容。但这很不方便——用户必须按住鼠标才能看到任何东西。但是，我们可以通过添加一个：hover伪类来欺骗用户，如果用户单击并悬停内容，该类将显示内容

到目前为止，我们有以下css：

.container.content {
  display: none; 
}
.container:active .content {
  display: block;
}
.content:hover {
  display: block; 
}

这是一个有点不稳定的虽然-你必须移动你的鼠标在内容上保持下来，并可能会混淆。但是，我们可以通过使内容比表面上看起来更大来进行一些欺骗。一个简单的方法就是填充（我在添加的示例中就是这么做的），但这可能会导致一些奇怪的回流问题。我认为一个更好的方法是在不改变流量的情况下，故意添加间距div，以增加内容的大小

如果我们加上这个

<div style="position:absolute; top:-50px; height: 50px; width: 100%;"></div>



在内容的开头，有一个不可见的div悬停在菜单上，它将扩展悬停工作的区域。类似的事情也可以做到底，留下我们

遗留问题

无论如何，这不是性能