jquery 点击切换面板及图标

原创 2013年12月03日 13:04:49

将背景颜色换成背景图

<!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>


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

JSP页面中JQ实现---当点击按钮的时候,改变原来样式,内容也发生改变,再次点击变成原来的样子

在网上找了很久,都是一些乱七八糟的代码,不能直接切入主题,所以只有自己亲自写了,废话不多说了,直接上代码 JSP页面代码,关键代码我给各位直接拿出来了,这样便于好看   + FOLLOW ...

PS怎样不通过图层面板,而通过鼠标点击图片直接切换图层

在PHOTOSHOP中,我把多个图像拖到一个背景上,好多图层要切换在图层面板里找的眼花,我记得以前有可以直接在图上点击就切换为当前图层的功能,但是我新装了PS后就忘了怎么设置了。我是PHOTOSHOP...

键盘显示的情况下,按home进入后台,再点击app图标切换回前台时发生crash

一、问题描述:键盘显示的情况下,按home进入后台,再点击app图标切换回前台时发生crash,控制台没有任何打印信息,只是停在了main入口,一脸懵圈。 如何找到crash原因? 解决方法:如果...

EXTJS actionclomn点击切换图标 单独设置disable

actionclomn列代码: { xtype: 'actioncolumn', ...

easyui里的切换面板、右键功能实现和点击跳转面板等功能

主要是sasyui框架选项卡跳转、选项卡右键功能
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)