jquery 点击切换面板及图标

最新推荐文章于 2021-08-22 14:29:19 发布
最新推荐文章于 2021-08-22 14:29:19 发布
阅读量2.5k 收藏
点赞数
分类专栏： html css jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zoe_Wang_ing/article/details/17094275
版权
css 同时被 3 个专栏收录
82 篇文章 0 订阅
订阅专栏
html
76 篇文章 0 订阅
订阅专栏
jquery
44 篇文章 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>


Zoe_Wang_ing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery点击图标菜单图文切换代码.zip
07-11
jQuery点击图标菜单图文切换代码基于jquery-1.9.1.min.js制作，效果绚丽，适用于企业展示型网站。
jQuery仿QQ面板文字图标滑动切换特效代码
03-20
**jQuery仿QQ面板文字图标滑动切换特效代码详解** 在网页设计中，用户交互体验是至关重要的，而jQuery库提供了一系列强大的工具，使得创建动态、交互性丰富的网页变得轻松。本篇文章将深入探讨如何利用jQuery实现一...
jquery好友面板切换
dxm809的博客
04-08 429
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;    &lt;title&gt;&lt;/title&gt;    &lt;meta charset="utf-8&q
点击切换界面
yin_chenglong的博客
04-25 310
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="js/angular.min.js" &gt
jquery插件实现面板切换效果
web开发
03-28 351
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;
jQuery仿QQ面板文字图标滑动切换.zip
最新发布
11-02
【jQuery仿QQ面板文字图标滑动切换】是一个网页特效，主要使用了CSS样式和jQuery库来实现一个类似QQ面板的文字和图标之间的滑动切换效果。这个特效可以为网站添加动态交互性，提升用户体验，使页面更加生动活泼。...
jQuery仿QQ面板文字图标滑动切换
04-25
**jQuery仿QQ面板文字图标滑动切换**是一种常见的网页交互效果，主要应用于导航菜单或功能面板，提升用户体验。这个效果是基于JavaScript库jQuery实现的，它使得用户在点击下一个选项时，文字图标能够平滑地从左侧或...
jQuery图标切换折叠代码
04-25
在本教程中，我们将探讨如何利用jQuery实现一个图标切换折叠的效果，这种效果通常用于隐藏和显示内容，比如菜单、面板或者详细信息区域。图标随着内容的展开和折叠进行向上和向下的旋转，给用户带来直观的交互体验。...
jQuery 点击切换表情符号特效
10-25
在本文中，我们将深入探讨如何使用jQuery来实现Facebook风格的表情符号点击切换特效。这个功能在社交媒体、论坛和聊天应用中非常常见，它允许用户通过点击图标来选择和插入各种表情，增强文字信息的情感表达。 首先...
纯JS实现点击多图片切换效果
04-14
纯JS实现点击多图片切换效果。 可以插入到你的网页中做用来做网页物资。
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
12-11
我们的电脑屏幕大小是固定的，那么如何在有限的空间放更多的内容呢？ 我们应该给用户足够的选择权，当他们想要看某些内容的时候可以很快的看到，不想看的时候就把他隐藏。于是就有了题目说的这个问题。其实这个问题很简单，那么，之所以拿出来跟大家分享，一方面我们大家相互交流，另一方面，也是对自己的学习的一种总结。 这里我想到了两种方法，给大家分享一下。 好了不多说，下面看代码： 第一种，是常规的方法： [javascript] 代码如下: $(function(){ var images = [‘images/up.png’, ‘images/down.png’] $(img).onClick(funct
jQuery 切换图片（图标）效果
weixin_33976072的博客
12-27 804
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.j...
jquery点击图标来回切换的几种方法（如开关按钮）
热门推荐
heshichao666的博客
09-18 1万+
1.$(".img").click(function(){ if(this.src.search("../static/img/off.png")!=-1){ this.src="../static/img/on.png"; }else{ this.src="../static/img/off.png" }
JS点击事件---点击切换图片
weixin_51713937的博客
08-22 7203
一、先上主图 二、源码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt
js中showModalDialog和showModelessDialog的使用
涓涓细流，细水长流
09-26 199
js中showModalDialog和showModelessDialog的使用 基本介绍： showModalDialog() (IE 4+ 支持) showModelessDialog() (IE 5+ 支持) window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。 window.showModelessDialog()方法用来创建一个显示...
jquery点击切换图标（比如刷新图标，静态变动态图片）
heshichao666的博客
11-27 4067
html:<img class="shuaxin" src="../static/img/break.png">js:$(".shuaxin").click(function(){ $(this).attr("src","../static/img/dongtai.gif");}); setInterval(function(){ // console.log(123) $(".sh
点击鼠标切换图标，再次点击图标恢复
heidongbuhei的博客
11-25 2975
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;首页&lt;/title&gt; &lt;link rel="stylesheet" href="../vend
jQuery 滑动及点击切换效果
05-25
以下是一个 jQuery 实现的滑动及点击切换效果的示例代码： HTML 代码： ``` <li class="active">Slide 1 <li>Slide 2 <li>Slide 3 ``` CSS 代码： ``` .slider ul { list-style: none; margin: 0; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值