以下是jsp中的全部内容,以下jsp中使用了java,引用了jquery
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>测试Div之间的互换</title>
<script type="text/javascript" src="${ctx}/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
//“4”代表动态增加标签的份数
<%for(int i = 0 ; i < 4; i++){%>
var liValue = "<li class='show1'>补充协议"+<%=i%>+"</li>"
$("#tab_title").append(liValue);
var divValue =
"<div class='tab_content'><table><tr><td>"
+<%=i%>+
"</td></tr></table></div>"
$("#tab_container").append(divValue);
<%}%>
ui_control(1);
$(".tab_content").height($(document).height()-200);
});
</script>
</head>
<!-- oncontextmenu禁止右键出现菜单, onselectstart禁止选中-->
<body οnlοad="inittables();">
<ul class="tab_title" id="tab_title">
<li class="show1">基本信息</li>
<li class="show1">其他</li>
</ul>
<div class="tab_container" id="tab_container">
<div class="tab_content" >
<table>
<tr>
<td>44444444444444</td>
</tr>
</table>
</div>
<div class="tab_content">
<table>
<tr>
<td>555555555</td>
</tr>
</table>
</div>
</div>
</body>
<script type="text/javascript">
function ui_control(aType){ //tabs-start
$("ul.tab_title li:eq(0)").addClass("select");
$(".tab_content:eq(0)").show();
$("ul.tab_title li").each(function(i){
$(this).click(function(){
//i=i+1;
//alert(i);
$(".tab_content:eq("+i+")").show().siblings().hide();
$(this).addClass("select").siblings().removeClass("select");
});
});
$("ul.tab_title li:eq("+aType+")").click();
//tabs_end
}
</script>
<style>
.tab_title{
float: left;
list-style: none;
}
.show1{
PADDING-RIGHT: 1px;
PADDING-LEFT: 1px;
FONT-SIZE: 18px;
Z-INDEX: 1;
FLOAT: left;
PADDING-BOTTOM: 2px;
CURSOR: pointer;
PADDING-TOP: 6px;
FONT-FAMILY: MARGIN, Helvetica, Arial;
POSITION: relative;
TOP: -6px;
background-position: right bottom;
background-repeat: no-repeat;
margin-top: 9px;
margin-right: 0px;
margin-bottom: -6px;
margin-left: 0px;
left: 3px;
width: 100px;
text-align: center;
}
.tab_container{
float: right;
margin-right: 800px;
margin-top:100px
}
.tab_content{
width: 500px;
height: 200px;
border: 1px solid green;
display: none; }
</style>
</html>
如果不使用java的话就需要使用foreach便签
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>测试Div之间的互换</title>
<script type="text/javascript" src="${ctx}/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
ui_control(1);
$(".tab_content").height($(document).height()-200);
});
</script>
</head>
<!-- oncontextmenu禁止右键出现菜单, onselectstart禁止选中-->
<body οnlοad="inittables();">
<ul class="tab_title" id="tab_title">
<li class="show1">基本信息</li>
<li class="show1">其他</li>
<c:forEach items="${list}" var="list">
<li class="show1">补充协议${list.index }</li>
</c:forEach>
</ul>
<div class="tab_container" id="tab_container">
<div class="tab_content" >
<table>
<tr>
<td>44444444444444</td>
</tr>
</table>
</div>
<div class="tab_content">
<table>
<tr>
<td>555555555</td>
</tr>
</table>
</div>
<c:forEach items="${list}" var="list">
<div class="tab_content">
<table>
<tr>
<td>${list.index }</td>
</tr>
</table>
</div>
</c:forEach>
</div>
</body>
<script type="text/javascript">
function ui_control(aType){ //tabs-start
$("ul.tab_title li:eq(0)").addClass("select");
$(".tab_content:eq(0)").show();
$("ul.tab_title li").each(function(i){
$(this).click(function(){
//i=i+1;
//alert(i);
$(".tab_content:eq("+i+")").show().siblings().hide();
$(this).addClass("select").siblings().removeClass("select");
});
});
$("ul.tab_title li:eq("+aType+")").click();
//tabs_end
}
</script>
<style>
.tab_title{
float: left;
list-style: none;
}
.show1{
PADDING-RIGHT: 1px;
PADDING-LEFT: 1px;
FONT-SIZE: 18px;
Z-INDEX: 1;
FLOAT: left;
PADDING-BOTTOM: 2px;
CURSOR: pointer;
PADDING-TOP: 6px;
FONT-FAMILY: MARGIN, Helvetica, Arial;
POSITION: relative;
TOP: -6px;
background-position: right bottom;
background-repeat: no-repeat;
margin-top: 9px;
margin-right: 0px;
margin-bottom: -6px;
margin-left: 0px;
left: 3px;
width: 100px;
text-align: center;
}
.tab_container{
float: right;
margin-right: 800px;
margin-top:100px
}
.tab_content{
width: 500px;
height: 200px;
border: 1px solid green;
display: none; }
</style>
</html>