tab显示数据

有这样一个表garde,点击每一个年级段分别查询下面的各个班级对应的学生
点击高一时(即parent_id=1)高二时(即parent_id=2)高三时(即parent_id=3),把其下所属的班级tab显示,然后分别查询各个班级下的学生。
grade
tab显示数据
grade.java
	private Integer id;
	private String classes;
	private Integer parentId;
        省略set、get方法

ServiceAction.java
	
	private List<Grade> tablist;
	private int parentId;
	private int tabId;
public String findClasses()  {
		tablist = GradeService.findClass(parentId);
		return "comjsp";
	}
/*
ServiceImpl.java
                //查询每一个年级段下的所有班级
	public List findClasses(Integer parentId) {
		// TODO Auto-generated method stub
		return serviceDAO.findTabClasses(parentId);
	}
	}
*/

menu.jsp可以增加三个连接,分别代表三个年级段
	[*]<a href="<%=request.getContextPath()%>/service/service_findClasses.action?parentId=1" ></a>高一

	[*]<a href="<%=request.getContextPath()%>/service/service_findClasses.action?parentId=2" ></a>高二

	[*]<a href="<%=request.getContextPath()%>/service/service_findClasses.action?parentId=3" ></a>高三


comjsp.jsp

<html>
<head>
<title></title>
        <link type="text/css" rel="stylesheet" media="all" href="../css/classes.css" />
        <script type="text/javascript" src="../js/jquery-1.4.3.js"></script>   
<script type="text/javascript">
$(document).ready(function() {
    $("#content").find("[id^='tab']").hide(); // Hide all content
    
    var tabId = $("#tabId").val();
    if(tabId!=""&&tabId!=0){
    	var items=document.getElementsByTagName('li');
    	$(items[tabId-1]).attr("id","current");   
    }else{
    	$("#tabs li:first").attr("id","current"); // Activate the first tab,默认第一个
        delete("1");
  
    }
    
    $('#tabs a').click(function(e) {
        e.preventDefault();
        if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
        	//查询方法{parameter:classes},便能根据classes查询该班级下的学生    
        
        }else{
          $("#content").find("[id^='tab']").hide(); // Hide all content
          $("#tabs li").attr("id",""); //Reset id's
          $(this).parent().attr("id","current"); // Activate this
          $('#' + $(this).attr('name')).fadeIn(); // Show content for the current tab
          var data = $(this).attr('name');
          var dataNumber = datawant.substring(3, data.length);
          delete(dataNumber);
         //查询方法{parameter:classes},便能根据classes查询该班级下的学生     
        }
    });
});
//去除下标,还原classes真值
function  delete(index){
	 var classes = $("#classes"+index).val();
	 $("#tabId").attr("value",index);
	   alert(classes);
}
</script>
</head>
<body >
        
	    <ul id="tabs">
	     <s:iterator value="tablist" status="stt">
		    <li>
		    	<a href="#" name="tab<s:property value='#stt.index+1'/>">
		    		<s:property value="classes" />
		    		<input type="hidden" value="<s:property value='classes'/>" name="classes<s:property value='#stt.index+1'/>" id="classes<s:property value='#stt.index+1'/>">
		    	</a>
		    </li>
		    </s:iterator>
		</ul>	
<s:form  name="comjsp" enctype="multipart/form-data">
		<!-- tabid -->
	<input type="hidden" value="<s:property value='tabId'/>" name="tabId" id="tabId">
</s:form>
</body>
</html>

参阅 http://red-team-design.com/css3-jquery-folder-tabs/
http://www.w3school.com.cn/jquery/
效果如下
点击高一时

tab显示数据
点击高二时

tab显示数据
点击高三时

tab显示数据

你可能感兴趣的:(tab)