实现切换题目的效果

最新推荐文章于 2021-08-06 15:47:50 发布

h_025

最新推荐文章于 2021-08-06 15:47:50 发布

阅读量1.2k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/h_025/article/details/70262701

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这几天一直想着捣鼓一个在线测试的网站，然后看到这样的一个效果，可以切换题目

一开始看到上面的效果，觉得很高大尚，然后仔细的研究了一下才知道实现的原理很简单，只是自己一开始没有想到而已，所以在这里我就自己也实现一个简单的案例，方便以后需要使用到这种效果是又忘记了：

<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>

（当然有些代码是多余的）