*、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();">更多>> </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();"><<收起 </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为锚点名称