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 相关文章推荐
XENON基于JSON变种
Jul 27 Javascript
treepanel动态加载数据实现代码
Dec 15 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
Feb 22 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
纯css实现窗户玻璃雨滴逼真效果
Aug 23 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 Javascript
jQuery无刷新分页完整实例代码
Oct 27 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 Javascript
Node.js log4js日志管理详解
Jul 31 Javascript
详解vue axios用post提交的数据格式
Aug 07 Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 Javascript
vue实现无缝轮播效果(跑马灯)
May 14 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防注
2007/01/15 PHP
php实现中文字符截取防乱码方法汇总
2015/04/29 PHP
PHP操作MySQL的mysql_fetch_* 函数的常见用法教程
2015/12/25 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
2014/04/16 Javascript
Javascript将JSON日期格式化
2016/08/23 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
javascript实现二叉树的代码
2017/06/08 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
微信小程序之选项卡的实现方法
2017/09/29 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
Vue中UI组件库之Vuex与虚拟服务器初识
2019/05/07 Javascript
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
nodeJs的安装与npm全局环境变量的配置详解
2020/01/06 NodeJs
js实现数据导出为EXCEL(支持大量数据导出)
2020/03/31 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
python查询mysql中文乱码问题
2014/11/09 Python
仅用50行Python代码实现一个简单的代理服务器
2015/04/08 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
django模型动态修改参数,增加 filter 字段的方式
2020/03/16 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
会计与审计专业自荐信范文
2014/03/15 职场文书
教学评估实施方案
2014/03/16 职场文书
禁毒宣传活动总结
2014/08/26 职场文书
2014年有孩子的离婚协议书范本
2014/10/08 职场文书
质量负责人岗位职责
2015/02/15 职场文书
小学教师自我评价
2015/03/04 职场文书
上诉答辩状范文
2015/05/22 职场文书
乱世佳人观后感
2015/06/08 职场文书
小学语文继续教育研修日志
2015/11/13 职场文书
Python绘制地图神器folium的新人入门指南
2021/05/23 Python
Python读取和写入Excel数据
2022/04/20 Python
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python