Question

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

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

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

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

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

Answer 1

听起来你可以利用基于下拉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。您可以使用class="contentA"标记要向所有用户（用户A）显示的任何部分，使用class="contentB"将用户A和B的任何区域标记为未标记。这点开始变得有点不简单，但看看你的想法。

以下是使用类http://jsfiddle.net/JsZ8S/5/

的示例（需要jQuery）

Answer 2

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

如果您有任何编程经验，那么一小部分JavaScript加上像jQuery这样的库应该可以让这很容易。

Answer 3

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

从下拉菜单中过滤网页内容的最简单方法是什么？

3 个答案: