关闭

jquery 点击切换面板及图标

1187人阅读 评论(0) 收藏 举报
分类:

将背景颜色换成背景图

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


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:176732次
    • 积分:2390
    • 等级:
    • 排名:第15634名
    • 原创:32篇
    • 转载:200篇
    • 译文:0篇
    • 评论:5条
    文章分类
    最新评论