jquery 点击切换面板及图标
来源：互联网 发布：javascript正则表达式= 编辑：程序博客网 时间：2024/05/17 09:28
将背景颜色换成背景图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript" src="learn/jquery.js"></script><style>.finance{border-bottom:none;}.finance dd{line-height:48px;color:#0e4f71;padding:5px 0;border-bottom:1px solid #eaeaea;background:#ffffff;}.finance dd p{padding-left:15px;line-height:38px;}finance dd{display:block;}.finance dd:hover{background:#ffffff;position:relative;z-index:1px;}.finance dd p:hover{background:#ebf1e5;}.finance dd p:hover .w90,.finance dd p:hover .w120,.finance dd p:hover .w110,.finance dd p:hover .w142{font-size:18px;font-weight:bold;} .finance dd p:hover span a{background:#C00;background-position:-264px -5px;color:#ffffff;vertical-align:middle;line-height:18px;text-align:left;padding:0px 0px 0px 6px;}.finance dd span a{padding:0px 5px;border:none;color:#0e4f71;display:inline-block;width:53px;height:20px;vertical-align:middle;line-height:18px;}.finance dd span a:hover{background:#090;background-position:-264px -5px;color:#ffffff;vertical-align:middle;line-height:18px;text-align:left;padding:0px 0px 0px 6px;}.finance dd span a:hover.curre{background:#60F;}/*details wxf 1202*/.details{background:#f6f7f5;padding:20px 0 30px 0;display:none;}.details ul{padding-left:15px;}.details ul li{float:left;line-height:30px;}.progressbg{background:#39C;width:105px;height:14px;-moz-border-radius: 3px; /* Gecko browsers */ -webkit-border-radius: 3px; /* Webkit browsers */border-radius:3px;margin:0px;display:inline-block;vertical-align:middle;}.progress{height:14px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;margin:0px;background:#2697d2;display:inline-block;vertical-align:middle;*vertical-align:6px;}.bond{background:#dddddd;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;padding:0px 5px;display:inline-block;line-height:20px;}</style></head><body><dl class="finance"> <dt class="bg_color mb10"> <span class="w146">名称</span> <span class="w90">年化收益</span> <span class="w120">理财金额（￥）</span> <span class="w110">预期收益（￥）</span> <span class="w142">到期时间</span> <span class="w60 pl10">操作</span> </dt> <script type="text/javascript">$(document).ready(function(e) {$(".finance a").click(function(){var detail = $(this).parent().parent().next('.details');var ca = $(this);if(detail.hasClass('down')){$(this).removeClass('curre');detail.slideUp(300);detail.removeClass('down');detail.addClass('up');return false;}if(detail.hasClass('up')){$('.details').slideUp(300);$('.details').removeClass('down');$('.details').addClass('up');$(".finance a").removeClass('curre');$(this).addClass('curre');detail.slideDown(300);detail.removeClass('up');detail.addClass('down');return false;}});}); </script> <dd> <p> <span class="w146">001期</span> <span class="w90">11.2%</span> <span class="w120">20,000.00</span> <span class="w110">2240</span> <span class="w142">2014-01-15</span> <span class="w60"><a href="javascript:;">详情</a></span> </p> <div class="details clear up"> <ul class="clear"> <li class="w158">投资期限：<em class="gray333">12个月</em></li> <li class="w264">购买时间：<em class="gray333">2013-08-14 15:02:56</em></li> <li>获取方式：<em class="gray333">原始购买</em></li> </ul> <ul class="clear"> <li class="w158">状态：<em class="blue">正常锁定中</em></li> <li class="w264">完成进度：<em class="progressbg"><em class="progress" style="width:74%;"></em></em> 74%</li> <li>操作：<em class="bond"><i class="flow"></i>债卷流转<i class="question"></i></em></li> </ul> </div> </dd> <dd> <p> <span class="w146">002期</span> <span class="w90">11.2%</span> <span class="w120">20,000.00</span> <span class="w110">2240</span> <span class="w142">2014-01-15</span> <span class="w60"><a href="javascript:;">详情</a></span> </p> <div class="details clear up"> <ul class="clear"> <li class="w158">投资期限：<em class="gray333">12个月</em></li> <li class="w264">购买时间：<em class="gray333">2013-08-14 15:02:56</em></li> <li>获取方式：<em class="gray333">原始购买</em></li> </ul> <ul class="clear"> <li class="w158">状态：<em class="blue">正常锁定中</em></li> <li class="w264">完成进度：<em class="progressbg"><em class="progress" style="width:74%;"></em></em> 10%</li> <li>操作：<em class="bond"><i class="flow"></i>债卷流转<i class="question"></i></em></li> </ul> </div> </dd> <dd> <p> <span class="w146">003期</span> <span class="w90">11.2%</span> <span class="w120">20,000.00</span> <span class="w110">2240</span> <span class="w142">2014-01-15</span> <span class="w60"><a href="javascript:;">详情</a></span> </p> <div class="details clear up"> <ul class="clear"> <li class="w158">投资期限：<em class="gray333">12个月</em></li> <li class="w264">购买时间：<em class="gray333">2013-08-14 15:02:56</em></li> <li>获取方式：<em class="gray333">原始购买</em></li> </ul> <ul class="clear"> <li class="w158">状态：<em class="blue">正常锁定中</em></li> <li class="w264">完成进度：<em class="progressbg"><em class="progress" style="width:74%;"></em></em> 10%</li> <li>操作：<em class="bond"><i class="flow"></i>债卷流转<i class="question"></i></em></li> </ul> </div> </dd> <dd> <p> <span class="w146">004期</span> <span class="w90">11.2%</span> <span class="w120">20,000.00</span> <span class="w110">2240</span> <span class="w142">2014-01-15</span> <span class="w60"><a href="javascript:;">详情</a></span> </p> <div class="details clear up"> <ul class="clear"> <li class="w158">投资期限：<em class="gray333">12个月</em></li> <li class="w264">购买时间：<em class="gray333">2013-08-14 15:02:56</em></li> <li>获取方式：<em class="gray333">原始购买</em></li> </ul> <ul class="clear"> <li class="w158">状态：<em class="blue">正常锁定中</em></li> <li class="w264">完成进度：<em class="progressbg"><em class="progress" style="width:74%;"></em></em> 10%</li> <li>操作：<em class="bond"><i class="flow"></i>债卷流转<i class="question"></i></em></li> </ul> </div> </dd> <dd> <p> <span class="w146">005期</span> <span class="w90">11.2%</span> <span class="w120">20,000.00</span> <span class="w110">2240</span> <span class="w142">2014-01-15</span> <span class="w60"><a href="javascript:;">详情</a></span> </p> <div class="details clear up"> <ul class="clear"> <li class="w158">投资期限：<em class="gray333">12个月</em></li> <li class="w264">购买时间：<em class="gray333">2013-08-14 15:02:56</em></li> <li>获取方式：<em class="gray333">原始购买</em></li> </ul> <ul class="clear"> <li class="w158">状态：<em class="blue">正常锁定中</em></li> <li class="w264">完成进度：<em class="progressbg"><em class="progress" style="width:74%;"></em></em> 10%</li> <li>操作：<em class="bond"><i class="flow"></i>债卷流转<i class="question"></i></em></li> </ul> </div> </dd> <dd> <p> <span class="w146">006期</span> <span class="w90">11.2%</span> <span class="w120">20,000.00</span> <span class="w110">2240</span> <span class="w142">2014-01-15</span> <span class="w60"><a href="javascript:;">详情</a></span> </p> <div class="details clear up"> <ul class="clear"> <li class="w158">投资期限：<em class="gray333">12个月</em></li> <li class="w264">购买时间：<em class="gray333">2013-08-14 15:02:56</em></li> <li>获取方式：<em class="gray333">原始购买</em></li> </ul> <ul class="clear"> <li class="w158">状态：<em class="blue">正常锁定中</em></li> <li class="w264">完成进度：<em class="progressbg"><em class="progress" style="width:74%;"></em></em> 10%</li> <li>操作：<em class="bond"><i class="flow"></i>债卷流转<i class="question"></i></em></li> </ul> </div> </dd> </dl></body></html>- jquery 点击切换面板及图标
- jQuery点击松开切换css样式及切换背景图
- jquery点击切换图标（比如刷新图标，静态变动态图片）
- 使用jquery点击切换
- jquery点击图标来回切换的几种方法（如开关按钮）
- jquery插件实现面板切换效果
- jquery切换图标选项卡
- 常用RadioGroup+Fragment点击切换，RadioButton图标设置自己想要的位置及大小
- 图标点击右下切换怎么做？
- jquery 点击函数切换 toggle()
- Jquery的点击切换效果
- 点击图标切换（包括点击图标下面的文字也切换）
- easyui里的切换面板、右键功能实现和点击跳转面板等功能
- jquery 点击函数切换 toggle() 及其其他实现点击切换
- JQuery UI之(三)可切换面板——tabs
- js jquery 写 面板 跳转 切换 有动画效果
- JQuery UI之(三)可切换面板——tabs
- 修复 win7 桌面 控制面板及网络图标
- 手机号码归属地api接口大全
- jobcontrol类
- ssh 关闭后仍保持当前运行的进程
- 程序员大牛 Jeff Atwood 的两本中文书
- 【Unity3D】【NGUI】屏幕自适应
- jquery 点击切换面板及图标
- 一致性hash
- KMP poj 2406 Power Strings 字符串的幂
- rxt客户端集成oa系统
- 二级指针实现单链表的插入、删除及 linux内核源码双向链表之奇技
- 组合数 C语言练习
- Oracle with子句的简单介绍.
- OSX: PlistBuddy不好使了
- UI Overview//用户界面概述
