这几天一直想着捣鼓一个在线测试的网站,然后看到这样的一个效果,可以切换题目
一开始看到上面的效果,觉得很高大尚,然后仔细的研究了一下才知道实现的原理很简单,只是自己一开始没有想到而已,所以在这里我就自己也实现一个简单的案例,方便以后需要使用到这种效果是又忘记了:
<html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
<link rel="stylesheet" type="text/css" href="./PHPEMS模拟考试系统_files/bootstrap.css">
<link rel="stylesheet" type="text/css" href="./bootstrap.css"/>
<script src="./bootstrap.min.js"></script>
<script src="./jquery.min.js"></script>
</head>
<body>
<div id="questions_1" class="box itembox paperexamcontent" style="display: block;margin:10px auto;width:400px">
<div style="background:red;width:300px;height:300px">背景颜色的改变</div>
<div class="toolbar" style="width:300px;">
<!-- <a class="btn btn-default" οnclick="javascript:gotoindexquestion(49);">
<span class="glyphicon glyphicon-chevron-left"></span>
上一题
</a> -->
<a class="pull-right btn btn-primary" οnclick="javascript:gotoindexquestion(1);">
下一题
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<div id="questions_2" class="box itembox paperexamcontent" style="display: none;margin:10px auto;width:400px">
<div style="background:yellow;width:300px;height:300px">背景颜色的改变</div>
<div class="toolbar" style="width:300px;">
<a class="btn btn-default" οnclick="javascript:gotoindexquestion(0);">
<span class="glyphicon glyphicon-chevron-left"></span>
上一题
</a>
<a class="pull-right btn btn-primary" οnclick="javascript:gotoindexquestion(2);">
下一题
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<div id="questions_2" class="box itembox paperexamcontent" style="display: none;margin:10px auto;width:400px">
<div style="background:blue;width:300px;height:300px">背景颜色的改变</div>
<div class="toolbar" style="width:300px;">
<a class="btn btn-default" οnclick="javascript:gotoindexquestion(1);">
<span class="glyphicon glyphicon-chevron-left"></span>
上一题
</a>
</div>
</div>
</body>
</html>
<script>
function gotoindexquestion(index)
{
$(".paperexamcontent").hide();
$(".paperexamcontent").eq(index).show();
}
</script>
(当然有些代码是多余的)