jQuery实战之品牌展示列表效果


Posted in Javascript onApril 10, 2011

jQuery实战之品牌展示列表效果

只是初始状态;

jQuery实战之品牌展示列表效果

这是点击后效果。首相分析下需求:
1,首先在页面中创建导航,单击标题的时候,隐藏内容,同时小图标也改变。
2,单击更多的时候,显示隐藏的链接内容,并将"更多"变成"简化",改变小图标,并高亮部分链接。
下面是完整代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb-2312"> 
<title>text</title> 
<script type="text/javascript" src="jquery-1.4.2.js"> 
</script> 
<style type="text/css"> 
*{ margin:0;padding:0;} 
body{ font-size:13px;} 
#wraper{ border:1px solid #ccc; width:301px; overflow:hidden;} 
#wraper .Head{ background;#eee; padding:8px; height:18px; cursor:pointer;} 
#wraper .Head h3{ float:left;} 
#wraper .Head span{ float:right; margin-top:3px;} 
#wraper .Content{ padding:8px;} 
#wraper .Content ul{ list-style:none; list-style-type:none;} 
#wraper .Content ul li{ float:left; width:95px; height:23px; line-height:23px;} 
#wraper .Bot{ float:right; padding-top:5px; padding-bottom:5px;} 
.GetFocus{ background:#eee;} 
.one{ color:#ff8000;} 
</style> 
<script type="text/javascript"> 
$(function(){//页面加载事件 
$(".Head").click(function(){//图片单击事件 
if($(".Content").is(":visible")){//如果内容可见 
$(".Head span img").attr("src","Images/a1.gif");//改变图片 
//隐藏内容 
$(".Content").hide(); 
}else{ 
$(".Head span img").attr("src","Images/a2.gif");//改变图片 
$(".Content").show(); 
} 
}); 
var $chaLi = $(".Bot > a") ; 
var $prompt = $("ul li:gt(4):not(:last)") 
$prompt.hide(); 
$($chaLi).click(function(){//热点链接单击事件 
//如果内容为简化 
if($chaLi.text() == "更多"){ 
//隐藏大于4 且不是最后一项的所有内容 
$(".Bot img").attr("src","Images/a7.gif") 
$prompt.show().addClass("GetFocus"); 
$("ul li").filter(":contains('青年'),:contains('老人'),:contains('少年')").addClass("one") 
$($chaLi).text("简化"); 
}else{ 
$prompt.hide() 
$(".Bot img").attr("src","Images/a6.gif") 
$($chaLi).text("更多"); 
} 
}) 
}) 
</script> 
</head> 
<body> 
<div id="wraper"> 
<div class="Head"> 
<h3>图书分类</h3> 
<span><img src="Images/a2.gif" alt=""/></span> 
</div> 
<div class="Content"> 
<ul> 
<li><a href="#">小说</a><i>(1000)</i></li> 
<li><a href="#">文艺</a><i>(1000)</i></li> 
<li><a href="#">知音</a><i>(1000)</i></li> 
<li><a href="#">少儿</a><i>(1000)</i></li> 
<li><a href="#">生活</a><i>(1000)</i></li> 
<li><a href="#">社科</a><i>(1000)</i></li> 
<li><a href="#">广利</a><i>(1000)</i></li> 
<li><a href="#">美女</a><i>(1000)</i></li> 
<li><a href="#">儿童</a><i>(1000)</i></li> 
<li><a href="#">老人</a><i>(1000)</i></li> 
<li><a href="#">少年</a><i>(1000)</i></li> 
<li><a href="#">青年</a><i>(1000)</i></li> 
<li><a href="#">成年</a><i>(1000)</i></li> 
<li><a href="#">女人</a><i>(1000)</i></li> 
<li><a href="#">父亲</a><i>(1000)</i></li> 
<li><a href="#">木青</a><i>(1000)</i></li> 
<li><a href="#">母亲</a><i>(1000)</i></li> 
<li><a href="#">妹妹</a><i>(1000)</i></li> 
<li><a href="#">其他</a><i>(1000)</i></li> 
</ul> 
</div> 
<div class="Bot"> 
<a href="#">更多</a> 
<img src="Images/a6.gif" /> 
</div> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
Oct 24 Javascript
jQuery操作checkbox选择(list/table)
Apr 07 Javascript
js弹出层永远居中实现思路及代码
Nov 29 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
javascript replace()第二个参数为函数时的参数用法
Dec 26 Javascript
vue下跨域设置的相关介绍
Aug 26 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
Apr 29 Javascript
微信公众号网页分享功能开发的示例代码
May 27 Javascript
JS sort方法基于数组对象属性值排序
Jul 10 Javascript
js实现菜单跳转效果
Dec 11 Javascript
Vue2项目中对百度地图的封装使用详解
Jun 16 Vue.js
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 #Javascript
JQuery优缺点分析说明
Apr 10 #Javascript
基于jquery的15款幻灯片插件
Apr 10 #Javascript
再次分享18个非常棒的jQuery表格插件
Apr 10 #Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
Apr 08 #Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
Apr 08 #Javascript
javascript学习笔记(五)正则表达式
Apr 08 #Javascript
You might like
php将数据库导出成excel的方法
2010/05/07 PHP
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
神盾加密解密教程(一)PHP变量可用字符
2014/05/28 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
jQuery LigerUI 使用教程表格篇(1)
2012/01/18 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
jQuery使用hide方法隐藏元素自身用法实例
2015/03/30 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
2016/04/25 Javascript
node.js路径处理方法以及绝对路径详解
2021/03/04 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
微信小程序 css使用技巧总结
2017/01/09 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
2018/07/07 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
python安装教程 Pycharm安装详细教程
2017/05/02 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
Numpy之random函数使用学习
2019/01/29 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
酒店端午节促销方案
2014/02/18 职场文书
宣传部部长竞选演讲稿
2014/04/26 职场文书
环保建议书300字
2014/05/14 职场文书
新农村建设汇报材料
2014/08/15 职场文书
2014年终个人工作总结
2014/11/07 职场文书
大学毕业生个人总结
2015/02/28 职场文书