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 UI 应用不同Theme的办法
Sep 12 Javascript
Js日期选择器并自动加入到输入框中示例代码
Aug 02 Javascript
模拟多级复选框效果的jquery代码
Aug 13 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
Aug 14 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
Sep 01 Javascript
jQuery实现预加载图片的方法
Mar 17 Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
JavaScript定时器制作弹窗小广告
Feb 05 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
Jul 31 Javascript
Node.js爬取豆瓣数据实例分析
Mar 05 Javascript
vue项目打包后请求地址错误/打包后跨域操作
Nov 04 Javascript
基于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 Ajax实现页面无刷新发表评论
2007/01/02 PHP
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
PHP的PDO操作简单示例
2016/03/30 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
js实现addClass,removeClass,hasClass的函数代码
2011/07/13 Javascript
document.write()及其输出内容的样式、位置控制
2013/08/12 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
2015/09/14 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
vue子路由跳转实现tab选项卡
2019/07/24 Javascript
深入解析微信小程序开发中遇到的几个小问题
2020/07/11 Javascript
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
python修改注册表终止360进程实例
2014/10/13 Python
python3生成随机数实例
2014/10/20 Python
python私有属性和方法实例分析
2015/01/15 Python
用python 制作图片转pdf工具
2015/01/30 Python
简单介绍Python中的RSS处理
2015/04/13 Python
基于tensorflow加载部分层的方法
2018/07/26 Python
python flask实现分页的示例代码
2018/08/02 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
opencv-python的RGB与BGR互转方式
2020/06/02 Python
Python docutils文档编译过程方法解析
2020/06/23 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
护理自我鉴定范文
2013/10/06 职场文书
电子商务专业自我鉴定
2013/12/18 职场文书
土木建筑学生自我评价
2014/01/14 职场文书
彩妆大赛策划方案
2014/05/13 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
师德师风个人总结
2015/02/06 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
员工规章制度范本
2015/08/07 职场文书
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技