您的位置：首页 > Web前端 > JQuery

天易16----jquery实现简单的控制列表数目

2012-11-08 19:23 316 查看

一：

效果预览：

图一：

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

图二：

二：

代码示例：

<%@ 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航