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 相关文章推荐
简略说明Javascript中的= =(等于)与= = =(全等于)区别
Apr 16 Javascript
用jquery生成二级菜单的实例代码
Jun 24 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
Nov 02 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
jQuery移动端图片上传组件
Jun 12 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
Aug 23 Javascript
SelecT下拉框选中和取值的解决方法
Nov 22 Javascript
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
Vue 监听列表item渲染事件方法
Sep 06 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 Javascript
vue实现的封装全局filter并统一管理操作示例
Feb 02 Javascript
开发一个封装iframe的vue组件
Mar 29 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魔术引号所带来的安全问题分析
2014/07/15 PHP
php结合正则获取字符串中数字
2015/06/19 PHP
PHP实现数据分页显示的简单实例
2016/05/26 PHP
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
Jquery 表单验证类介绍与实例
2013/06/09 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
JavaScript与ActionScript3两者的同性与差异性
2016/09/22 Javascript
基于jQuery实现顶部导航栏功能
2016/12/27 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
2017/05/11 Javascript
js图片上传的封装代码
2017/08/01 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
2018/07/26 Javascript
webpack4简单入门实例
2018/09/06 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
处理JavaScript值为undefined的7个小技巧
2020/07/28 Javascript
vue+echarts实现动态折线图的方法与注意
2020/09/01 Javascript
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
python实现汽车管理系统
2018/11/30 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
德国旅行、体验和活动的预订平台:Watado
2019/12/04 全球购物
农药学硕士毕业生自荐信
2013/09/25 职场文书
网上蛋糕店创业计划书
2014/01/24 职场文书
《猫》教学反思
2014/02/26 职场文书
妇女工作先进事迹
2014/08/17 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
义诊活动总结
2015/02/04 职场文书
幼儿园个人总结
2015/02/28 职场文书
个人工作表现自我评价
2015/03/06 职场文书
高中家长意见怎么写
2015/06/03 职场文书
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL