天易16----jquery实现简单的控制列表数目
一：
效果预览：
图一：
当点击显示全部资源时出现图二效果
图二：
二：
代码示例：
<%@ 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>