jsp页面“更多”和“收起”

最新推荐文章于 2021-06-01 00:22:37 发布

lBovinl

最新推荐文章于 2021-06-01 00:22:37 发布

阅读量506

点赞数

CC 4.0 BY-SA版权

分类专栏：前端技术源码示例文章标签：显示更多收起内容定位锚点

本文链接：https://blog.youkuaiyun.com/lBovinl/article/details/84826476

前端技术同时被 2 个专栏收录

43 篇文章

订阅专栏

源码示例

30 篇文章

订阅专栏

本文介绍如何在JSP页面上实现内容的分批加载，通过展示部分记录并提供“显示更多”和“收起”的功能来改善用户体验。此外，还介绍了两种创建页面锚点的方法及其实现跳转的代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

*、jsp页面上有时不想显示过多内容，此时可以选择先显示N条，然后点击触发按钮从而显示更多内容，实现原理是第一次加载就置于页面的隐藏区域内，当点击触发按钮时进行显示和隐藏操作即可，jsp页面实现代码如下:

//带表格的页面代码示例(显示前五行，隐藏后面的)：
<table width="100%" border="0" cellspacing="0" cellpadding="0">
	<tr>
		<th width="100">列1</th>
		<th>列2</th>
		<th width="80" >列3</th>
	</tr>
	<c:forEach items="${itemList }" var="item" end="4"><%--显示前五行--%>
		<tr>
		    <td>值1</td>
		    <td>值2</td>
		    <td>值3</td>
		</tr>
	</c:forEach>
	<c:if test="${fn:length(itemList) > 5 }"><%--隐藏五行以后的数据--%>
	     <tr align="right" id="itemMore">
			<td colspan="3"><a href="javascript:void(0);" onclick="itemMore();">更多>>&nbsp;</a></td>
             </tr>
	     <c:forEach items="${itemList }" var="item" varStatus="status" begin="5" >
                <tr name="itemTr" style="display: none;">
			<td>值1</td>
			<td>值2</td>
			<td>值3</td>
		</tr>
	     </c:forEach>
		<tr align="right" id="itemLess" style="display: none;" >
			<td colspan="3"><a href="javascript:void(0);" onclick="patentOtherSQ();">&lt;&lt;收起&nbsp;</a></td>
		</tr>
	</c:if>
</table>

接下来是js代码，可以写入jsp页面中，但是为了养成良好的编码习惯，还是将页面和js分开较好，如下：

//收起
function itemLess() {
	$("tr[name='itemTr']").each(function() {
             $(this).fadeOut();
	});
	$("#itemMore").fadeIn(1000);
	$("#itemLess").hide();
}
//更多
function itemMore() {
	$("tr[name='itemTr']").each(function() {
	      $(this).fadeIn(1000);
             //备注：此时如果换成show函数，页面会出现神奇的一跳，故显示函数要选择正确
	});
	$("#itemLess").fadeIn(1100);
	$("#itemMore").hide();
}

关于hide()、show()、fadeIn()、fadeOut()、toggle()要学会灵活灵用哈~

*、定位锚点

 第一种：<标签，id="anchor"></标签>
 第二种：<a name="anchor"></a>
 跳转代码：
 location.href = "#anchor"; // anchor为锚点名称
 window.location.hash = “anchor”; // anchor为锚点名称