Question

我目前正在使用display:none来隐藏我网站上的所有div。用户点击例如“info”或“contact”，相应的div将通过JQuery向下滑动。为了支持没有Javascript的用户，如果没有启用Javascript，链接将转到“info.php”和“contact.php”。

这是一个非常麻烦的维护，因为当我做出任何更改时，我必须更新主页面和非javascript版本（info.php，contact.php等）。

没有Javascript的用户对JQuery滑动div有什么明智的支持？

Answer 1

当我理解你的时候，制作一个包含静态内容的php文件。（所有网站上的内容）并包含来自其他文件的每个包含的内容（信息/联系人），具体取决于GET Param，如“page”。

Answer 2

使用jQuery隐藏<div>，这样没有JavaScript的用户仍然可以在一个长页面中看到所有<div>。另一方面，使用JavaScript的用户可以像往常一样滑动<div>。

jQuery IS JavaScript - 不能作为备份计划。

一个人不会简单地使用术语JavaScript和jQuery交替使用

jQuery是一个JavaScript库。通过禁用JavaScript，jQuery脚本将无法隐藏<div>。关键是在JavaScript不可用时保持功能。只要您不对页面执行关键操作而不使用JavaScript就会使其无法正常运行，您就可以满足那些非JavaScript用户的需求。在这种情况下，将修改工作放在jQuery（或JavaScript）上是一种保留功能的方法。

Answer 3

将info.php主文本放在包含文件中。让我们说info.inc.php

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

但是当一个js用户点击链接时，你将info.inc.php加载到你的div上，然后只用那个用jquery显示它。

说

$('a.info').click(function(e){
    e.preventDefault();
    $('#infoDiv').load('info.inc.php')
                .show();
    return false;
});

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

Answer 4

首先为所有div添加一个类to_hide，当javascript被激活时应该隐藏它们。

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

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

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

为避免闪烁，您可以动态添加to_hide类的css规则。使用<head>中的以下功能来执行此操作：

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

Answer 5

纯CSS解决方案

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

<强>功能

默认情况下，隐藏所有内容。但是，由于：active pseudoclass，您可以更改在单击父级时显示的内容。这非常不方便 - 用户必须按住鼠标才能看到任何内容。但是，我们可以作弊 - 通过添加：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悬停在菜单上，这将扩展悬停工作的区域。类似的事情可以在底部完成，留给我们with a solution that has a larger hover area, and doesn't trigger reflows beyond the main content.

剩余问题

无论如何，这并不完美，因为它肯定不如javascript灵活。没有滑动，如果用户将鼠标移出，则无法可靠地显示内容。

正如其他人建议的那样，你仍然可以通过javascript改善这一点，但事实上如果用户已启用它 - 这仍然可以作为noscript用户的体面备份。

Answer 6

我最终使用的解决方案结合了Antony的答案和这个答案：https://stackoverflow.com/a/8928909/1342461

<html class="no-js">
<body>
<div id="foo"></div>
</body>
</html>

#foo
{
    display: none;
}

html.no-js #foo
{
    display: block;
}

$(document).ready(
   function()
   {
     $('html').removeClass('no-js');
   }
);

所有div都将被没有javascript的人看到。然后，我可以将我的导航链接设置为a href="#info"，以便在为javascript用户执行“slide.down（）”等操作时向非javascript用户滚动到正确的div。

支持非Javascript用户 - JQuery Slide

6 个答案: