jquery选项卡-将内容从包含的jsp切换到另一个jsp
jquery tabs - switching content from included jsp to another
我有一个带有jquery选项卡的主页面。我的选项卡的内容是我包含的一个jsp页面：
<div id="tabs">
<ul>
<li><a href="#tabs-1">Users</a></li>
</ul>
<div id="tabs-1"> <jsp:include page="users.jsp" /> </div>
</div>
这个jsp页面包含一个显示用户详细信息的表。这是表格的标题：我希望最后一列包含一个"详细信息"链接，当它被点击时，我想将选项卡的内容更改为另一个显示用户详细信息的jsp页面。
几个问题：
- 如何在单击时切换到第二个jsp
为了显示请求用户的详细信息，我需要以某种方式将userID传递给第二个jsp页面。我该怎么做？我有一个链接，它的id是我需要的用户id：
<td><a id="<%=user.getUserID()%>">Details</a></td>
我对这方面真的很陌生，试着瞪大眼睛问我的问题，但我无法将其拼凑成一个有效的解决方案。
谢谢！
视图来源：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Conf4You</title>
<link type="text/css" href="css/cupertino/jquery-ui-1.8.18.custom.css"
rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#tabs').tabs();
});
</script>
<style type="text/css">
/*demo page css*/
body {
font: 62.5% "Trebuchet MS", sans-serif;
margin: 50px;
}
.demoHeaders {
margin-top: 2em;
}
</style>
</head>
<body>
<!-- Tabs -->
<h2 class="demoHeaders">Tabs</h2>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Users</a></li>
</ul>
<div id="tabs-1">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link type="text/css" href="css/main.css" rel="stylesheet" />
<link type="text/css" href="css/tables/tableList.css" rel="stylesheet" />
</head>
<body>
<p class="horizontal-line">Actions</p>
<p class="horizontal-line">Users</p>
<table cellpadding="0" cellspacing="0" border="0" id="table" class="sortable">
<thead>
<tr>
<th><h3>Name</h3></th>
<th><h3>Phone 1</h3></th>
<th><h3>Phone 2</h3></th>
<th><h3>Email</h3></th>
<th><h3>Company</h3></th>
<th><h3>Last Access</h3></th>
<th class="nosort"><h3>Details</h3></th>
</tr>
</thead>
<tbody>
<tr>
<td>user0</td>
<td>Num10</td>
<td>num20</td>
<td><a style="color: blue;" href="mailto:yada0@gmail.com">yada0@gmail.com</a></td>
<td>yada</td>
<td>31-03-2012 06:32:34 PM</td>
<td><a id="1" onclick="detailsAction()"
style="color: blue;">Details</a></td>
<!-- todo- change details link -->
</tr>
<tr>
<td>user1</td>
<td>Num11</td>
<td>num21</td>
<td><a style="color: blue;" href="mailto:yada1@gmail.com">yada1@gmail.com</a></td>
<td>yada</td>
<td>31-03-2012 06:32:34 PM</td>
<td><a id="2" onclick="detailsAction()"
style="color: blue;">Details</a></td>
<!-- todo- change details link -->
</tr>
<tr>
<td>user2</td>
<td>Num12</td>
<td>num22</td>
<td><a style="color: blue;" href="mailto:yada2@gmail.com">yada2@gmail.com</a></td>
<td>yada</td>
<td>31-03-2012 06:32:34 PM</td>
<td><a id="3" onclick="detailsAction()"
style="color: blue;">Details</a></td>
<!-- todo- change details link -->
</tr>
<tr>
<td>user3</td>
<td>Num13</td>
<td>num23</td>
<td><a style="color: blue;" href="mailto:yada3@gmail.com">yada3@gmail.com</a></td>
<td>yada</td>
<td>31-03-2012 06:32:34 PM</td>
<td><a id="4" onclick="detailsAction()"
style="color: blue;">Details</a></td>
<!-- todo- change details link -->
</tr>
<tr>
<td>user4</td>
<td>Num14</td>
<td>num24</td>
<td><a style="color: blue;" href="mailto:yada4@gmail.com">yada4@gmail.com</a></td>
<td>yada</td>
<td>31-03-2012 06:32:34 PM</td>
<td><a id="5" onclick="detailsAction()"
style="color: blue;">Details</a></td>
<!-- todo- change details link -->
</tr>
</tbody>
</table>
<div id="controls">
<div id="perpage">
<select onchange="sorter.size(this.value)">
<option value="5">5</option>
<option value="10" selected="selected">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<span>Entries Per Page</span> </div>
<div id="navigation"> <img src="css/tables/images/first.gif" width="16" height="16"
alt="First Page" onclick="sorter.move(-1,true)" /> <img
src="css/tables/images/previous.gif" width="16" height="16"
alt="First Page" onclick="sorter.move(-1)" /> <img
src="css/tables/images/next.gif" width="16" height="16"
alt="First Page" onclick="sorter.move(1)" /> <img
src="css/tables/images/last.gif" width="16" height="16"
alt="Last Page" onclick="sorter.move(1,true)" /> </div>
<div id="text"> Displaying Page <span id="currentpage"></span> of <span
id="pagelimit"></span> </div>
</div>
<script type="text/javascript" src="js/tables/script.js"></script>
<script type="text/javascript">
var sorter = new TINY.table.sorter("sorter");
sorter.head = "head";
sorter.asc = "asc";
sorter.desc = "desc";
sorter.even = "evenrow";
sorter.odd = "oddrow";
sorter.evensel = "evenselected";
sorter.oddsel = "oddselected";
sorter.paginate = true;
sorter.currentid = "currentpage";
sorter.limitid = "pagelimit";
sorter.init("table", 1);
</script>
</body>
</html>
</div>
</div>
</body>
</html>
找到解决方案，这应该是脚本：
<script type="text/javascript">
$(document).ready(function() {
$('#tabs').tabs({
load: function(event, ui) {
$(ui.panel).delegate('a', 'click', function(event) {
$(ui.panel).load(this.href);
event.preventDefault();
});
}
});
$("#tabs").bind('tabsselect', function(event, ui) {
window.location.href=ui.tab;
});
});
</script>
以及它的用途：
<div id="tabs">
<ul>
<li><a href="users.jsp"><span>Users</span></a></li>
<li><a href="conference.jsp"><span>Conferences</span></a></li>
<li><a href="companies.jsp"><span>Companies</span></a></li>
</ul>
</div>
这就是为什么第一个选项卡的内容是users.jsp
<td><a href="userDetails.jsp?userid=<%=user.getUserName()%>"> <img src="/conf4u/resources/imgs/yada.png" alt=""> Details </a> </td>
现在单击userDetails.jsp时，它会在同一个选项卡中打开。
您可以在选项卡锚的href中放入一个适当的url，以允许选项卡的ajax加载。
请参阅ajax加载示例：http://jqueryui.com/demos/tabs/#ajax
相关文章：
- 如何将输入类型值或id从一个jsp传递到另一个jsp页面
- 如何将日期id从一个jsp传递到另一个jsp页面
- Dropdown基于jsp Struts中的另一个下拉列表
- 方法以打开Javascript中的另一个jsp页面
- 使用Onclick将参数从一个jsp页面传递到另一个页面
- 使用PHP和JSP在另一个网页中获取cookie值
- 如何将 JS 变量从一个 jsp 页面传递到另一个页面
- 将值从文本框获取到同一 jsp 中的另一个文本框
- 如何将对象从一个 JSP 传递到另一个 JSP
- jsp-如何将输入值分配给我想稍后使用的另一个变量
- 使用 AJAX 将隐藏变量解析为另一个 jsp 文件
- 另一个 JSP(也使用 jQuery）中的 JSP(使用 jQuery）出现问题
- Java 服务器页面.如何将参数从一个 JSP 页发送到另一个 JSP 页
- 如何将组合框的动态更改值获取到同一JSP页面中的另一个文本字段中
- 如何从其他 jsp 调用方法/函数以包含在另一个 jsp 的 jstree 中
- 将变量从一个 JSP 发送到另一个 JSP
- 将一些复选框值从一个 JSP 传递到另一个 JSP
- 如何将动态更改的参数从一个jsp页面发送到另一个jsp页
- jquery选项卡-将内容从包含的jsp切换到另一个jsp
- 如何将复选框值的数组从一个JSP页面传递到另一个页面
