简单的答题模板样式

最新推荐文章于 2022-04-13 18:08:14 发布
暗夜螃蟹
最新推荐文章于 2022-04-13 18:08:14 发布
阅读量1.1k
点赞数
分类专栏： JAVASCRIPT 文章标签： class div list javascript border function
本文链接：https://blog.csdn.net/thl331860203/article/details/8040608
版权
JAVASCRIPT 专栏收录该内容
51 篇文章 0 订阅
订阅专栏
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  
    <title>answer</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<style type="text/css"> 

body{
font-size:12px;
background-color:#fff;
}
 
.main{
 width:100%;
}
 
.top h4{
width:100%;
background-color: #A3CBE0;
border:1px solid #73AFD0;
position:fixed;
left:0px;
top:0px;
}
 

.answer_list {
margin-top:0px;
background-color:#E0EEF5;
border-bottom:1px dashed #73AFD0;
color:#000000;
position: static;
width:auto;
height:auto;
}

.answer_list2 {
background-color:#FFFFFF;
border-bottom:1px dashed #73AFD0;
color:#000000;
position: static;
width:auto;
height:auto;
}



.px_content{
margin-left:50px;
margin-right:50px;
}

.answer_foot{
margin-top:10px;
margin-left:10px;
margin-right:10px;
}

.answer_foot_left{
float:left;
}
.answer_foot_right{
float:right;
}

.px_tm{
 font-size:14px;
 color:#22536A;
 padding:3px;
}

</style>
 </head>
  
  <body>
   <div class="main">
   <form action="do_answer.jsp" name="form1" method="post">
     <div class="top"><h4> 题目</h4></div>
     
    <div id="px_answer_1"  style="display:none">
     <div class="answer_list">
       <div class="px_content">
        <span class="px_tm">1、第一题题目</span><br/>
         A.<input type="radio" name="1_a" value="a" />选择a  <br/>
         B.<input type="radio" name="1_a" value="a" />选择b  <br/>
         C.<input type="radio" name="1_a" value="a" />选择c  <br/>
         D.<input type="radio" name="1_a" value="a" />选择d  <br/>
        </div>
     </div>
     
     
   
     <div class="answer_list2">
       <div class="px_content">
        <span class="px_tm">2、第一题题目</span><br/>
         A.<input type="radio" name="1_a" value="a" />选择a  <br/>
         B.<input type="radio" name="1_a" value="a" />选择b  <br/>
         C.<input type="radio" name="1_a" value="a" />选择c  <br/>
         D.<input type="radio" name="1_a" value="a" />选择d  <br/>
        </div>
     </div>
     
     
      <div class="answer_list">
       <div class="px_content">
        <span class="px_tm">3、第一题题目</span><br/>
         A.<input type="radio" name="1_a" value="a" />选择a  <br/>
         B.<input type="radio" name="1_a" value="a" />选择b  <br/>
         C.<input type="radio" name="1_a" value="a" />选择c  <br/>
         D.<input type="radio" name="1_a" value="a" />选择d  <br/>
        </div>
     </div>
     
     </div>
     
   
   
   
   
    <div id="px_answer_2" style="display:none">
     <div class="answer_list">
       <div class="px_content">
        <span class="px_tm">1、第二题题目</span><br/>
         A.<input type="radio" name="1_a" value="a" />选择a  <br/>
         B.<input type="radio" name="1_a" value="a" />选择b  <br/>
         C.<input type="radio" name="1_a" value="a" />选择c  <br/>
         D.<input type="radio" name="1_a" value="a" />选择d  <br/>
        </div>
     </div>
     
     
   
     <div class="answer_list2">
       <div class="px_content">
        <span class="px_tm">2、第二题题目</span><br/>
         A.<input type="radio" name="1_a" value="a" />选择a  <br/>
         B.<input type="radio" name="1_a" value="a" />选择b  <br/>
         C.<input type="radio" name="1_a" value="a" />选择c  <br/>
         D.<input type="radio" name="1_a" value="a" />选择d  <br/>
        </div>
     </div>
     
     
      <div class="answer_list">
       <div class="px_content">
        <span class="px_tm">3、第二题题目</span><br/>
         A.<input type="radio" name="1_a" value="a" />选择a  <br/>
         B.<input type="radio" name="1_a" value="a" />选择b  <br/>
         C.<input type="radio" name="1_a" value="a" />选择c  <br/>
         D.<input type="radio" name="1_a" value="a" />选择d  <br/>
        </div>
     </div>
     
     </div>
   
   
    <div id="px_answer_3" style="display:none">
     <div class="answer_list">
       <div class="px_content">
        <span class="px_tm">1、第三题题目</span><br/>
         A.<input type="radio" name="1_a" value="a" />选择a  <br/>
         B.<input type="radio" name="1_a" value="a" />选择b  <br/>
         C.<input type="radio" name="1_a" value="a" />选择c  <br/>
         D.<input type="radio" name="1_a" value="a" />选择d  <br/>
        </div>
     </div>
     
     
   
     <div class="answer_list2">
       <div class="px_content">
        <span class="px_tm">2、第三题题目</span><br/>
         A.<input type="radio" name="1_a" value="a" />选择a  <br/>
         B.<input type="radio" name="1_a" value="a" />选择b  <br/>
         C.<input type="radio" name="1_a" value="a" />选择c  <br/>
         D.<input type="radio" name="1_a" value="a" />选择d  <br/>
        </div>
     </div>
     
     
      <div class="answer_list">
       <div class="px_content">
        <span class="px_tm">3、第三题题目</span><br/>
         A.<input type="radio" name="1_a" value="a" />选择a  <br/>
         B.<input type="radio" name="1_a" value="a" />选择b  <br/>
         C.<input type="radio" name="1_a" value="a" />选择c  <br/>
         D.<input type="radio" name="1_a" value="a" />选择d  <br/>
        </div>
     </div>
     
     </div>
   
   
   
   
   
   
     
     
     <div class="answer_foot">
      <div class="answer_foot_left">
      <span id="px_up">
      <a href="javascript:goto_page('up',-1);">
      <img style="cursor:hand" border="0" src="images/px_back.gif" />
      </a>
      </span>
      </div>
      <div class="answer_foot_right">
       <span id="px_next">
        <a href="javascript:goto_page('next',1);">
       <img style="cursor:hand"  border="0" src="images/px_next.gif" />
        </a>
      </span>
       <span id="px_submit" style="display:none">
        <a href="javascript:chkform()"><img style="cursor:hand"  border="0" src="images/px_submit.png" /></a>
       </span>
      </div>
    </div>
    </form>
   </div>
  
<script type="text/javascript">
page=1;
function sub(){
 if(chkform()){
 document.form1.submit();
 }
}
function chkform(){


 return true;
}

function goto_page(name,id){
  //alert("page:"+page);
  
  
  if(name=="next"){
    
    //alert(page);
    document.getElementById("px_answer_"+(page+1)).style.display="";
    document.getElementById("px_answer_"+page).style.display="none";
    document.getElementById("px_up").style.display="";
    page=page+1;
    //隐藏next 显示提交 
   // document.getElementById("px_next").style.display="none";
   // document.getElementById("px_submit").style.display="";
  }
  
  if(name=="up"){
   //alert(page);
    document.getElementById("px_answer_"+(page-1)).style.display="";
    document.getElementById("px_answer_"+page).style.display="none";
    page=page-1;
  }
  
  
  if(page==1){
    document.getElementById("px_up").style.display="none";
  }
  
}

function loading_page(){
 document.getElementById("px_up").style.display="none";
 document.getElementById("px_answer_1").style.display="";
}
loading_page();

</script>  
  
   
  </body>
</html>