4

我希望能够允许用户从下拉菜单中“过滤”HTML 页面的内容。

我的编码技能很少，但维护一个使用 Emacs org-mode 生成的简单网站。（易于组装页面并使用标签生成相同内容的不同版本。）输出是简单的 HTML。

我可以轻松地生成页面的不同版本，并通过下拉菜单在它们之间移动使它们可选择，但这意味着我的网站上有相同内容的不同版本，这使得搜索引擎的检索变得混乱。

理想情况下，我希望用户 A 能够选择查看整个页面，用户 B 可以查看其中的一部分，而用户 C 可以查看除一小部分之外的大部分内容。这是对用户的方便（不是为了安全等）

实现这一点的最简单方法是什么？我意识到 Web 开发人员可能会使用 Ajax 等，但那不是我。

4

3 回答 3

3

听起来您可以使用基于下拉 SELECT 的某些 DIV 显示/隐藏页面部分。

为此，您将要过滤的内容包装在一些 DIV 中，并创建一个 JavaScript 函数，该函数根据 SELECT 的 value 属性“过滤”显示的内容。

这是一个简单的例子：

HTML

<select id="myDropdown" onchange="filterContent();">
    <option value="A">All content</option>
    <option value="B">Some content</option>
    <option value="C">Little content</option>
</select>

<div id="contentA">
    ** Content A ***
</div>
<div id="contentB">
    ** Content B ***
</div>
<div id="contentC">
    ** Content C ***
</div>

JavaScript

function filterContent() {
    var user = document.getElementById("myDropdown").value;
    var contentA = document.getElementById("contentA");
    var contentB = document.getElementById("contentB");
    var contentC = document.getElementById("contentC");
    if(user=="A") {
        contentA.style.display="block";
        contentB.style.display="block";
        contentC.style.display="block";
    } else if (user=="B") {
        contentA.style.display="none";
        contentB.style.display="block";
        contentC.style.display="block";
    } else if (user=="C") {
        contentA.style.display="none";
        contentB.style.display="none";
        contentC.style.display="block";
    }
}

在这里试试：http: //jsfiddle.net/JsZ8S/

这是另一个示例，其中包含多个不同部分，可以根据选择显示或隐藏。请注意，用于 ID 的方案是 contentA1、contentA2 等。字母是用户，字母后面的数字是序列，因为 ID 必须是唯一的。还要注意 JavaScript 代码的区别——因为我们有更多的部分，我们必须考虑在 if/else 块中显示和隐藏它们：http: //jsfiddle.net/JsZ8S/2/

如果您准备好使用 jQuery，另一个示例是使用类。如果您发现您正在创建大量部分并且厌倦了跟踪 ID，您可能想要使用类。在这种情况下，类就像您可以反复使用的 ID 一样工作。您使用 标记您希望向所有用户（用户 A）显示的任何部分，使用 标记class="contentA"用户 A 和 B 的任何区域，class="contentB"以及其他所有内容都保持未标记。在这一点上这开始变得有点不简单，但看看你的想法。

这是一个使用类的示例（需要 jQuery）：http: //jsfiddle.net/JsZ8S/5/

于 2013-06-16T15:16:51.530 回答
1

您不能仅使用 HTML 来做到这一点。HTML 定义了具有静态格式的静态文档。您至少需要一点 JavaScript 才能动态更改页面。否则，您必须创建某种链接或按钮，将浏览器带到具有所需更改的新页面。（这是关于网络在前 5 年左右的工作方式。）

如果您有任何编程经验，那么一点点 JavaScript 加上一个像 jQuery 这样的库应该可以很容易地做到这一点。

于 2013-06-16T02:58:22.253 回答
1

HTML 仅用于创建标记，而 CSS 用于对其进行样式设置。您无法在纯 HTML 中进行“过滤”。你肯定需要一些 JavaScript 知识。试试 jQuery 和 angularJS。它们真的很容易学习，并且文档非常棒。

于 2013-06-16T12:16:05.017 回答