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 相关文章推荐
js读取本地excel文档数据的代码
Nov 11 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
VueJS全面解析
Nov 10 Javascript
字太多用...代替的方法(两种)
Mar 15 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
Dec 06 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
Dec 23 Javascript
vue-cli 目录结构详细讲解总结
Jan 15 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 Javascript
vue实现图片裁剪后上传
Dec 16 Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 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面向对象之旅:深入理解static变量与方法
2014/01/06 PHP
php中opendir函数用法实例
2014/11/15 PHP
php中array_unshift()修改数组key注意事项分析
2016/05/16 PHP
php基于单例模式封装mysql类完整实例
2016/10/18 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
PHP面向对象程序设计之构造方法和析构方法详解
2019/06/13 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
JS DOM 操作实现代码
2010/08/01 Javascript
8个实用的jQuery技巧
2014/03/04 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
ES6中的箭头函数实例详解
2017/04/06 Javascript
实例详解Node.js 函数
2018/06/10 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
关于vue属性使用和不使用冒号的区别说明
2020/10/22 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
详解利用Python scipy.signal.filtfilt() 实现信号滤波
2019/06/05 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
TensorFlow2.0矩阵与向量的加减乘实例
2020/02/07 Python
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
心理健康心得体会
2014/01/02 职场文书
项目投资意向书
2014/04/01 职场文书
合伙协议书
2014/04/23 职场文书
学校安全生产承诺书
2014/05/23 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书
优秀教师个人总结
2015/02/11 职场文书
详解Django的MVT设计模式
2021/04/29 Python
JS实现数组去重的11种方法总结
2022/04/04 Javascript