Question

我正在尝试在网站上创建一个FAQ页面，所有问题都放在一起，类似于目录（例如维基百科上的内容）。当您点击该问题时，它会将您从页面跳到问题（从上面重复）以及它的答案。

由于问题在页面上出现两次，因此以明显的方式执行此操作会导致问题在代码中出现两次，如果需要修改问题则可能会导致问题，而更新问题的人只会更改代码在一个地方。

另外，在每个问题/答案对之前放置一个带有无意义名称的锚标签似乎有点不合逻辑;如果使用了数字，那么当添加或删除问题时，这又会出现问题。

我想我基本上希望有一种方法可以将问题和答案存储在一个数组中（使用PHP或javascript可能？）或一对数组，然后对于数组中的每个元素，将一个列表项与生成锚标签，问题和答案。这是可行的，还是我只是采取了错误的方法进行Web开发？

相关的问题：无论如何要设置无序列表以用“Q：”替换子弹吗？

Answer 1

创建目录的最简单方法肯定是使用锚点;易于更新，创建和利用。如果您查看Wikipedia等网站，他们也会使用anchor-table-of-contents方法。客户端是否可能正在编辑网页？否则，这不应该是一个巨大的麻烦。

至于你的问题，我知道可以通过CSS编辑列表中的项目符号并用图像替换它们。它看起来像是：

ul {
 list-style-position: outside;
 list-style-image: url("image.gif")
 list-style-type: square;
}

更多信息可以在这里找到：http://www.mediacollege.com/internet/css/ul-list.html

Answer 2

<?php
    $questions = array(
        "Question 1",
        "Question 2",
        "Question 3",
        "Question 4"
    );

    echo '<p>';     // FAQ Menu

    foreach ($questions as $key => $question) {
        echo '<a href="#', $key, '">', $question, '</a><br />';
    }

    echo '</p>';

    // Begin FAQ

    foreach ($questions as $key => $question) {
        echo '<h2><a name="', $key, '">', $question, '</a></h2>';
    }

?>

您可以修改HTML以获取所需的格式。数组键成为锚名称，因此如果您想更改问题，您只需在数组中修改一次。

如果您想分开您的问题和答案，可以使用：

<?php
    $questions = array(
        array("Question 1", "Answer 1"),
        array("Question 2", "Answer 2"),
        array("Question 3", "Answer 3"),
        array("Question 4", "Answer 4")
    );

    echo '<p>';

    foreach ($questions as $key => $question) {
        echo '<a href="#', $key, '">', $question[0], '</a><br />';
    }

    echo '</p>';

    foreach ($questions as $key => $question) {
        echo '<h2><a name="', $key, '">', $question[0], '</a></h2>';
        echo '<p>', $question[1], '</p>';
    }

?>

制作目录样式常见问题网页，无需复制HTML

2 个答案: