拿来即用的着陆页问卷脚本

Peter

需要为自己的活动设置一个调查问卷吗?

这是很常见的。从“你担心病毒吗?”到“你愿意随叫随到和我们的成员发生性关系吗?”，我们的很多活动都是基于向人们提问。

所以，这里有一个快速、可用的方法来为你的登录页面设置一个问卷。

注意:这是一个使用JQuery的版本，对于移动设备来说可能有点过重:测试一下!我将在后续的文章中为带宽受限的手机做一个更轻的版本。

完成本教程需要什么？

你需要:

• 对HTML有基本的了解——你需要为此编辑HTML。

• 对CSS有基本的了解。如果您可以设置一个#style#标签并将类分配给元素，那么就没问题了。

• 您想要添加问卷的登录页。

• 每个问题都要用到的HTML、图像等等。

你不需要理解Javascript:我会逐行讲解。

只想要代码？

如果你只是想要一个简单的代码复制粘贴，这里有一个工作示例，你可以复制它们测试：

课程附件：12874.rar 中的 1.html

想要更多的解释吗?继续往下读，看看里面发生了什么!

HTML和CSS

你需要一个基本的登陆页面来添加这些代码，包括你想要的所有文本和图像，以及你在最后的CTA。CSS应该在#head#中使用#style##/style#标签，其他的都应该在#body#中。

首先，我们需要为我们的问题和按钮创建一些样式。

这很简单:我们只需要确保当用户第一次加载页面时，我们的后续问题和我们的和CTA是不可见的。

我们还需要确保我们可以引用Javascript中的每个问题，通过给它们一个唯一的类。

所以，如果我们要创建三个问题，然后一些文本和链接到我们的任务，我们会使用以下类:

.secondquestion, .thirdquestion, .finaltext{display: none}

注意，我们不需要在这里创建一个“firstquestion”类，因为它还不需要应用任何样式。

现在，将您想要显示到HTML中的每个部分添加到它们应该显示的位置。用相关的类将每个部分封装在DIV标记中(参见下面的代码)——因此，“firstquestion”表示第一个问题，“secondquestion”表示第二个问题，以此类推。我们需要这样做，以便我们的Javascript可以根据需要使每个部分可见或不可见。

确保你想要点击的每个元素周围都有一个a标签。

如下：

在这个阶段，当您在浏览器中加载页面时，您应该看到第一个元素，其他什么也看不到。这是因为后面的元素现在是隐藏的:我们将使用Javascript来取消隐藏它们，并在适当的时候隐藏第一个问题。

代码

首先

加入社区,可阅读全站10w+资源

您尚未登录，请登录后操作

 非会员试读19%,加入社区后可阅读全文