网页开发-问答题_显示题目-02
2016-01-09 23:39
323 查看
在上一节,编写main.css的时候,是把整个quiz隐藏起来了,而这里把隐藏的题目一个一个列举出来,
把main.css改为
body{ margin-left:50px; } #question1, #question2, #question3, #question4, #question5, #question6, #question7, #question8, #question9, #question10 { display:none; }
然后再编写一个文件game.js
if(jQuery){ $("#question1").show(); }
index.html内容如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Quiz</title> <!--在本目录下,加入了main样式--> <link rel="stylesheet" type="text/css" href="main.css"> </head> <body> <h1>Quiz</h1> <div id="quiz"><!--此id用在main样式表中--> <div id="question1"> <div class="question">Which is not a main file type that we use to make websites?</div> <input type="radio" name="question1" value="a"/> <label>.html</label> <input type="radio" name="question1" value="b"/> <label>.exe</label> <input type="radio" name="question1" value="c"/> <label>.js</label> <input type="radio" name="question1" value="d"/> <label>.css</label> </div> <br /> <div id="question2"> <div class="question">A JavaScript object is wrapped by what charaters?</div> <input type="radio" name="question2" value="a"/> <label>[]</label> <input type="radio" name="question2" value="b"/> <label>;;</label> <input type="radio" name="question2" value="c"/> <label>{}</label> <input type="radio" name="question2" value="d"/> <label>()</label> </div> <br /> <div id="question3"> <div class="question">Moles are which of the following?</div> <input type="radio" name="question3" value="a"/> <label>Omniverous</label> <input type="radio" name="question3" value="b"/> <label>Adorable</label> <input type="radio" name="question3" value="c"/> <label>Whackable</label> <input type="radio" name="question3" value="d"/> <label>All of the above</label> </div> <br /> <div id="question4"> <div class="question">In Japanese "か" is prounounced...</div> <input type="radio" name="question4" value="a"/> <label>ka</label> <input type="radio" name="question4" value="b"/> <label>ko</label> <input type="radio" name="question4" value="c"/> <label>ke</label> <input type="radio" name="question4" value="d"/> <label>ki</label> </div> <br /> <div id="question5"> <div class="question">The gravitational constant on earth is approximately...</div> <input type="radio" name="question5" value="a"/> <label>10m/s^2</label> <input type="radio" name="question5" value="b"/> <label>.809m/s^2</label> <input type="radio" name="question5" value="c"/> <label>9.81m/s^2</label> <input type="radio" name="question5" value="d"/> <label>84.4m/s^2</label> </div> <br /> <div id="question6"> <div class="question">45 (in base 10) is what in binary (base 2)?</div> <input type="radio" name="question6" value="a"/> <label>101101</label> <input type="radio" name="question6" value="b"/> <label>110011</label> <input type="radio" name="question6" value="c"/> <label>011101</label> <input type="radio" name="question6" value="d"/> <label>101011</label> </div> <br /> <div id="question7"> <div class="question">4 << 22 = ...</div> <input type="radio" name="question7" value="a"/> <label>16</label> <input type="radio" name="question7" value="b"/> <label>4</label> <input type="radio" name="question7" value="c"/> <label>2</label> <input type="radio" name="question7" value="d"/> <label>8</label> </div> <br /> <div id="question8"> <div class="question">Given the lengths of two sides of a right triangle (one with a 90 degree angle), how would you find the hypotenuse?</div> <input type="radio" name="question8" value="a"/> <label>Pi*Radius^2</label> <input type="radio" name="question8" value="b"/> <label>Pythagorean Theorem</label> <input type="radio" name="question8" value="c"/> <label>Calculator?</label> <input type="radio" name="question8" value="d"/> <label>Sin(side1 + side2)</label> </div> <br /> <div id="question9"> <div class="question">True or False: All games must run at at least 60 frames per second to be any good.</div> <input type="radio" name="question9" value="a"/> <label>True</label> <input type="radio" name="question9" value="b"/> <label>False</label> </div> <br /> <div id="question10"> <div class="question">Using a server can help you to...</div> <input type="radio" name="question10" value="a"/> <label>hide your code.</label> <input type="radio" name="question10" value="b"/> <label>have a performant game.</label> <input type="radio" name="question10" value="c"/> <label>create shared experiences for players.</label> <input type="radio" name="question10" value="d"/> <label>all of the above.</label> </div> </div> <script src="jquery.js"/> <script src="game.js"/> </body> </html>
上方粗体,斜体是加在上一节代码里。
在main.css中,其他可以不用一个一个地隐藏,也可以使用类选择器。
上方的jquery.js在网上下载即可
相关文章推荐
- Android开发_WebView组件使用详解_LoadUrl直接显示网页内容
- Eclipse搭建jsp开发环境后建立jsp文件显示无法显示网页
- Android开发——相册拍照_02.将拍照得到或相册中选择的图片显示在ImageView中
- web开发-邮件编写HTML网页正常显示实现方法-学习笔记八
- php--------网页开发实现微信JS的(定位,地图显示,照片选择功能)
- [Web开发] 让IE8自动使用兼容模式显示网页的方法
- 运维开发:python websocket网页实时显示远程服务器日志信息
- [Web开发] 让IE8自动使用兼容模式显示网页的方法
- Android开发_WebView组件使用详解_LoadUrl直接显示网页内容
- 安卓开发, 遇到WebView不能加载静态网页, WebView显示 "net::ERR_PROXY_CONNECTON_FAILED"
- ckeditor4开发插件显示html网页内容
- Spring Boot系列02-Spring Boot + JSP 整合进行网页开发
- 网页开发--02(开发环境配置)
- [Web开发] 让IE8自动使用兼容模式显示网页的方法
- iPhone开发 No IB 添加一个webview来显示网页
- 微信公众平台jsapi开发教程(8)显示隐藏网页右上角菜单
- php--------网页开发实现微信JS的(定位,地图显示,照片选择功能)
- php--------网页开发实现微信JS的(定位,地图显示,照片选择功能)
- ios开发之ios9UIWebView不显示网页问题
- Win7系统解决使用MyEclipse进行Web开发中网页无法显示.woff矢量图标的问题