jquery实现简单的控制列表数目

　2012-11-08 19:30:18　来源：WEB开发网　　　

核心提示： 图一：当点击显示全部资源时出现图二效果图二：二：代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request

图一：

当点击显示全部资源时出现图二效果

图二：

二：

代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title></title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript" src="<%=basePath %>js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		
		var hdv=$('.content ul li:gt(5):not(:last)');
	  	hdv.hide();//保留li前五条(这里指的索引值默认从0开始)并且显示出最后一条
		
	  $('.boxmore a').click(function(){
	  	if(hdv.is(':visible')){//判断是否选择了显示全部资源
	  		hdv.hide();
	  		$('.boxmore a span').text("显示全部资源");
	  		$('ul li').removeClass('onebox');//还原红色字体为默认显示的字体
	  	}else{
	  		hdv.show();
	  		$('.boxmore a span').text("精简资源");
	  		$('ul li').filter(":contains('js视频教程'),:contains('Jquery视频教程'),:contains('DIV+CSS'),:contains('网页模板下载')").addClass('onebox');//contains:表示点击显示全部资源后哪些字体显示加粗红色字体(addClass('onebox'))，filter筛选所要改变的字体
	  		
	  	}
	  	return false;//去掉页面链接中的“#”字符,防止链接乱跳到别的网址
	  	
	  });
	  
	  
	});
	
</script> 
<style type="text/css">
*{padding:0;margin:0;}
body {font-size:12px;}
ul{list-style-type:none;}/*全掉ul前边的实点*/
a {text-decoration:none;color:#404040;font-family:"宋体";outline:none;}/*去掉链接的下划线 */
a:hover{text-decoration: underline;color:red;}/*定义下划线的颜色，当鼠标经过时显示红色*/
.content {width:600px;margin:40px auto 0 auto;border:1px solid #ccc;text-align: center;}
.content ul li{float:left;width:170px;margin-right:15px;line-height: 20px;}/*让标题内容横向显示 */
.container{border:5px solid #eee;padding:10px;}/*定义内边框的宽和高、被交给你颜色*/
.container ul{padding-left:15px;}
.boxmore{clear:both;padding-top:10px;}/*让"显示全部起源"链接显示在层的最底边*/
.boxmore a{display:block;width:120px;line-height:24px;border:1px solid #aaa;margin:0 auto;}/*将“显示全部资源”链接以块的方式显示，貌似按钮的样式 */
.onebox a{color:red;font-weight: bold;}
</style> 
</head>
<body>
<div class="content">
    <div class="container">
    	<ul>
    		<li><a href="#">HTML网页基础编程</a><span>(3040)</span></li>
    		<li><a href="#">js视频教程</a><span>(27220)</span></li>
    		<li><a href="#">Struts2.1视频教程详解</a><span>(20803)</span></li>
    		<li><a href="#">Mysql数据库视频教程</a><span>(17821)</span></li>
    		
    		<li><a href="#">Java视频基础教程</a><span>(12289)</span></li>
    		<li><a href="#">Photoshop视频教程</a><span>(8242)</span></li>
    		<li><a href="#">Servlet/Jsp详解教程</a><span>(14894)</span></li>
    		<li><a href="#">Jquery视频教程</a><span>(9520)</span></li>
    		<li><a href="#">Oracle视频教程详解</a><span>(2195)</span></li>
    		
    		<li><a href="#">DIV+CSS</a><span>(4114)</span></li>
    		<li><a href="#">高清图片下载</a><span>(122205)</span></li>
    		<li><a href="#">网页模板下载</a><span>(1466)</span></li>
    		<li><a href="#">图标资源下载</a><span>(3091)</span></li>
    		<li><a href="#">其它资源</a><span>(7275)</span></li>
    	</ul>
    	<div class="boxmore"><a href="#"><span>显示全部资源</span></a></div>
    </div>
</div> 
</body>
</html>