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>


Jquery 通过切换按钮中图标的类来控制出现不同的按钮图标

通过切换按钮中图标的类来控制出现不同的按钮图标       .class1{font-size:120%;color:green;}.class2{font-size:120%;color:r...
  • wlpz0528
  • wlpz0528
  • 2016年05月11日 18:05
  • 221

点击图标切换(包括点击图标下面的文字也切换)

HTML: 全部 ...
  • java_zhaoyanli
  • java_zhaoyanli
  • 2016年10月25日 10:17
  • 731

Jquery实现的一个DIV层面板的折叠/展开效果

Jquery实现的一个DIV层面板的折叠/展开效果_网页代码站(www.webdm.cn) *{margin:0;padding:0;} body { font-size: 14px; li...
  • qq_32340877
  • qq_32340877
  • 2017年01月08日 15:09
  • 3345

jquery制作滑动面板

  • 2014年07月24日 18:39
  • 135KB
  • 下载

js jquery 写 面板 跳转 切换 有动画效果

无标题文档 //当窗体加载完毕的时候, 触发该匿名函数 //$(document)  把dom对象转换成jqery对象 $(function (){ $("#tabs")....
  • php_jiang
  • php_jiang
  • 2012年03月28日 20:06
  • 1372

jquery插件之面板

1、在学习jquery插件之前首先我们来看一下该怎样开始布置工作     jquery  ui使用前提:             第一步:引入类库文件                     包...
  • wjc19911118
  • wjc19911118
  • 2012年03月28日 21:18
  • 1972

JQuery UI之(三)可切换面板——tabs

一、          前言Tabs组件的使用与dialog一样十分简单,  默认的配置即可实现最简单的tab, 通过设置更多的options可以实现更复杂的应用. 二、          直入主题引...
  • soldierluo
  • soldierluo
  • 2009年12月13日 16:48
  • 9603

jQuery效果之滑动面板

无标题文档 $(document).ready(function(){               $('.box a').click(function(){          ...
  • xxssyyyyssxx
  • xxssyyyyssxx
  • 2015年10月28日 08:13
  • 507

下部选项卡使用的图标,点击时改变颜色.css雪碧图

手机App的一般的选项卡都是几个图标。点击切换时颜色改变,如果要一个个的通过img把图片引进来,然后使用js写点击时改变图的src,这样真的太复杂了,那么能不能只需要css就可以实现我们想要的效果呢》...
  • qq_33769914
  • qq_33769914
  • 2016年09月23日 16:49
  • 2889

JQuery实现点击图片更换图片

作为一位一直从事后端开发的码农,忽然开始接触前端的内容,真有点转不过来,还是来写点东西作为记录吧,也算是经验的积累了。项目中上传图片功能完成后,运营同事说需要有更换图片的功能,便于图片排版,好吧,不得...
  • u011234605
  • u011234605
  • 2015年06月24日 16:19
  • 6921
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery 点击切换面板及图标
举报原因:
原因补充:

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