这个选项调查的特效以选项卡的形式，每答完一道题目自动切换到下一条，颇具特色。使用jQuery和CSS3，适合HTML5浏览器。
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>jQuery+CSS3答题卡翻页效果_何问起</title> <meta content="telephone=no" /> <meta content="yes" /> <meta content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" /> <meta content="何问起"> <meta content="何问起"> <link href="https://hovertree.com/texiao/jquery/87/hovertreeanswer.css" /> <style>h2{color:white;text-align:center;}a{color:deeppink;font-size:16px;}</style> </head> <body> <div> <br /> <h2>jQuery+CSS3翻页效果的调查答题卡</h2> <div> <!--Q1--> <div> <div> <p><span>Q1、</span>你第一门接触的编程语言是？</p> <ul> <li> <input type="radio"> <label for="q1_1">JavaScript</label> </li> <li> <input type="radio"> <label for="q1_2">C语言</label> </li> <li> <input type="radio"> <label for="q1_3">Java</label> </li> <li> <input type="radio"> <label for="q1_4">C#</label> </li> <li> <input type="radio"> <label for="q1_5">其他</label> </li> </ul> <div><span><b>1</b>/5</span></div> </div> </div> <!--Q2--> <div> <div> <p><span>Q2、</span>你主要从事的开发设计工作是？</p> <ul> <li> <input type="radio"> <label for="q2_1">Web前端</label> </li> <li> <input type="radio"> <label for="q2_2">安卓软件开发</label> </li> <li> <input type="radio"> <label for="q2_3">IOS软件开发</label> </li> <li> <input type="radio"> <label for="q2_4">网站、软件维护</label> </li> <li> <input type="radio"> <label for="q2_5">数据库开发管理</label> </li> </ul> <div><a>上一题</a><span><b>2</b>/5</span></div> </div> </div> <!--Q3--> <div> <div> <p><span>Q3、</span>你最早知道的有关开发的网站是哪个？</p> <ul> <li> <input type="radio"> <label for="q3_1">何问起（）</label> </li> <li> <input type="radio"> <label for="q3_2">博客园（）</label> </li> <li> <input type="radio"> <label for="q3_3">柯乐义（）</label> </li> <li> <input type="radio"> <label for="q3_4">CSDN（）</label> </li> <li> <input type="radio"> <label for="q3_5">其他</label> </li> </ul> <div><a>上一题</a><span><b>3</b>/5</span></div> </div> </div> <!--Q4--> <div> <div> <p><span>Q4、</span>你开发中使用的主要操作系统是？</p> <ul> <li> <input type="radio"> <label for="q4_1">Windows 10</label> </li> <li> <input type="radio"> <label for="q4_2">Windows 7</label> </li> <li> <input type="radio"> <label for="q4_3">Linux</label> </li> <li> <input type="radio"> <label for="q4_4">Mac OS</label> </li> <li> <input type="radio"> <label for="q4_5">其他</label> </li> </ul> <div><a>上一题</a><span><b>4</b>/5</span></div> </div> </div> <!--Q5--> <div> <div> <p><span>Q5、</span>你觉得下面哪个栏目最实用？</p> <ul> <li> <input type="radio"> <label for="q5_1">网页特效 </label> </li> <li> <input type="radio"> <label for="q5_2">在线题库 </label> </li> <li> <input type="radio"> <label for="q5_3">jQuery下载 </label> </li> <li> <input type="radio"> <label for="q5_4">图片 </label> </li> <li> <input type="radio"> <label for="q5_5">代码 </label> </li> </ul> <div><a>上一题</a><span><b>5</b>/5</span></div> </div> </div> <!--6--> <div> <div> <p></p> <ul> <li>感谢您的参与！<br /> 更多信息请访问何问起网。 <br /> <a href="https://hovertree.com" target="_blank">何问起首页</a> </li> </ul> <div><a>上一题</a></div> </div> </div> </div><!--/card_wrap--> <br /><br /> <div> <a href="https://hovertree.com">首页</a> <a href="https://hovertree.com/texiao/">特效库</a> <a href="https://hovertree.com/h/bjaf/ml26ksm5.htm">原文</a> </div> </div> <script src="https://down.hovertree.com/jquery/jquery-1.8.3.min.js"></script> <script src="https://hovertree.com/texiao/jquery/87/hovertreeanswer.js"></script> <script> $(function(){ $("#answer").answerSheet({}); }) </script> </body> </html>