1

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

维护起来相当麻烦，因为当我进行任何更改时，我必须同时更新主页和非 JavaScript 版本（info.php、contact.php 等）。

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

4

6 回答 6

2

当我理解你的正确时，使用静态内容制作一个 php 文件。（所有站点上的内容）和包含来自另一个文件的每个包含的内容（信息/联系人），具体取决于“页面”之类的 GET 参数。

于 2013-01-24T18:10:07.450 回答
2

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

  • jQuery IS JavaScript - 不能作为备用计划。
  • 不能简单地互换使用 JavaScript 和 jQuery 这两个术语

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

于 2013-01-24T18:22:47.047 回答
1

At first add a class to_hide to all divs which should be hidden when javascript is activated.

The simplest way is to hide the divs like this on page load:

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

Note that if you do this, the layout will blink when loaded (the full content will be shown at first and then the dynamic divs will be hidden).

To avoid blinking you can add css rule for to_hide class dynamically. Use the following function in the <head> to do that:

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');
于 2013-01-24T18:27:20.350 回答
1

我最终使用了一个结合了安东尼的答案和这个答案的解决方案：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');
   }
);

没有javascript的人将看到所有的div。然后，我可以设置我的导航链接a href="#info"，例如，让它向下滚动到非 JavaScript 用户的正确 div，同时为 JavaScript 用户执行“slide.down()”等。

于 2013-01-24T21:11:49.603 回答
1

纯 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 悬停在菜单上，这将扩展悬停工作的区域。类似的事情可以做到底部，给我们留下一个具有更大悬停区域的解决方案，并且不会触发超出主要内容的回流。

剩下的问题

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

正如其他人所建议的那样，您仍然可以在用户启用它之后使用 javascript 来改进它 - 这仍然可以作为 noscript 用户的一个不错的备份。

于 2013-01-24T18:31:23.860 回答
1

将您的 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;
});

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

于 2013-01-24T18:22:44.327 回答