JQuery 如何实现在同一个页面，通过点击不同的链接（action），显示不同的list
发布网友
发布时间：2022-04-21 16:59
共3个回答
热心网友
时间：2022-04-21 18:28
main.jsp更改如下
<%@ page language="java" pageEncoding="UTF-8"%>
<DIV class="ui-layout-north">
</DIV>
<DIV class="ui-layout-west">
<dl id="sfqclick">
<dt class="leftIco">
省市
</dt>
<dd>
<a href="1.jsp">查询省</a>
<a href="#">查询市</a>
</dd>
<dt class="leftIco">
第二部分
</dt>
<dd>
<a href="#">SubLink-1</a>
<a href="#">SubLink-2</a>
<a href="#">SubLink-3</a>
</dd>
<dt class="leftIco">
第三部分
</dt>
<dd>
<a href="#">SubLink-1</a>
<a href="#">SubLink-2</a>
<a href="#">SubLink-3</a>
</dd>
</dl>
</DIV>
1.jsp更改如下
<%@ page language="java" pageEncoding="UTF-8"%>
<HTML>
<HEAD>
<TITLE>Layout Example</TITLE>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<SCRIPT type="text/javascript" src="jquery.js"></SCRIPT>
<SCRIPT type="text/javascript" src="jquery.layout.js"></SCRIPT>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<SCRIPT type="text/javascript">
$(document).ready(function () {
$('body').layout({ applyDefaultStyles: true });
//
$("#sfqclick dt").click(function(){
$(this).toggleClass("bottomIco")
.next().slideToggle(1)
.siblings("dd").slideUp("fast");
$(this).siblings("dt").removeClass("bottomIco");
});
});
// add parser through the tablesorter addParser method
$.tablesorter.addParser({ // set a unique id
id: 'grades',
is: function(s) { // return false so this parser is not auto detected
return false;},
format: function(s) { // format your data for normalization
return s.toLowerCase().replace(/good/,2).replace(/medium/,1).replace(/bad/,0); },
// set type, either numeric or text
type: 'numeric' });
$(function() {
$("table").tablesorter({
headers: {
6: {
sorter:'grades'
}
}
});
});
$(document).ready(function(){
$('dd a:first').click(function(){
$.ajax({
type: "POST",
url: "findProvinceAll.action",
dataType: "json",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
});
});
</SCRIPT>
</HEAD>
<body>
<jsp:include page="main.jsp"></jsp:include>
<DIV class="ui-layout-center">
<table cellspacing="1" class="tablesorter">
<thead>
<tr>
<th>省ID</th>
<th>省名称</th>
</tr>
</thead>
<tbody>
<tr>
<td id="prvoinceId"></td>
<td id="provinceName"></td>
</tr>
</tbody>
</table>
</DIV>
</BODY>
</HTML>
结果看图访问1.jsp
热心网友
时间：2022-04-21 19:46
我以前就是用EXT JS来做的像你说的这种页面，挺好的，我这里有一个官方API，你可以看一下：
http://w45438.s48.mydiscuz.com/docs/
链接就是API，有问题咱们可以讨论一下，相互提高
热心网友
时间：2022-04-21 21:21
