按钮切换显示不同的内容(js控制)
今天项目发现了一个jsp页面按钮切换,下面展示模块的不同显示问题,看到同事修改完之后的效果,js控制感觉特写好,所以想写把这个好的方法js记录下来,以便以后的参考。
一:先上图,了解大概的样子,如下图
点击是的时候,下面块中的内容显示出来,同时框中的值设置为默认的值,不让自己选择输入;点击否的时候,下面的内容消失。
二、下面展示js控制的部分:
/**
* 产品后续交易(是否可转让)处理
*/
//是否可转让
var isInvestTransferable = eval("${product.isInvestTransferable }");//获取切换按钮的值,作为后续数据显示的判断标准。,
var InvestTransferDiv = {//对显示模块部分做相应的控制
addValid:function(){ //是的时候,给下面的模块添加校验
$("#creditAgreementType").rules("add", {required: true});
$("#investTransferDayLimit").rules("add", {required: true, digits:true, maxlength:5 });
$("#investTransferDayLimitEnd").rules("add", {required: true, digits:true, maxlength:5 });
$("#investTransferFeeRate").rules("add", {required: true, number:true, isDecimal:[0, 10, 2] });
},
removeValid:function(){ //否的时候,给下面的模块移除校验
$("#creditAgreementType").rules("remove");
$("#investTransferDayLimit").rules("remove");
$("#investTransferDayLimitEnd").rules("remove");
$("#investTransferFeeRate").rules("remove");
},
show:function(){//显示的时候,增添校验,赋值
this.addValid();
$("#investTransferDayLimit").val("1").attr("readOnly",true);
$("#investTransferDayLimitEnd").val("1").attr("readOnly",true);
$("#investTransferFeeRate").val("0.5").attr("readOnly",true);
$("#investTransferDiv").show();
},
hide:function(){//隐藏的时候,去掉校验,将值置为空
this.removeValid();
$("#investTransferDayLimit").val("").attr("readOnly",false);
$("#investTransferDayLimitEnd").val("").attr("readOnly",false);
$("#investTransferFeeRate").val("").attr("readOnly",false);
$("#investTransferDiv").hide();
}
};
//可转让,根据获取值的结果true或者false进行显示与否。
if(isInvestTransferable) {
InvestTransferDiv.show();
} //产品后续交易(是否可转让),单选按钮change事件
$("input[name='isInvestTransferable']").bind("change", function() {
var isTrue = eval($("input[name='isInvestTransferable']:checked").val());//根据按钮的onchange事件进行不同的显示。
if(isTrue) {
InvestTransferDiv.show();
} else {
InvestTransferDiv.hide();
}
});
到此,控制标签切换展示不同效果的js就完了,发现这段代码没有冗余,很好。大家有更好的或者有问题的欢迎大家积极指正啊,谢谢。
按钮切换显示不同的内容(js控制)的更多相关文章
- 编写html与js交互网页心得:编写两个按钮切换显示不同的图片
第一步:先建立一个html网页,如下: <!DOCTYPE html><html> <head> <meta charset="utf-8&quo ...
- C#同一位置切换显示两个Panel内容
如果两个panel重合在一起,点击不同按钮切换显示不同的panel,需要xxx.BringToFront(); 1.首先让两个panel的visible都为false, 在加载页面load方法里可以让 ...
- js实现tab页面不同内容切换显示
效果 实现的思路如下: controller层同时把两个内容都查处理 前端html用js控制显示 (1)前端的tab代码 (2)tab内容的结构 (3)关键部分 js $(".hd ...
- js控制select选中显示不同表单内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js控制页面显示
两个菜单切换显示页面内容: js控制代码, /** JS初始化 **/ $(document).ready(function() { $('#email_btn').click(function(){ ...
- Vue如何实现swiper左右滑动内容区控制导航tab同时切换高亮
Vue如何实现左右滑动内容区控制导航tab同时切换高亮,实现的效果是:点击导航按钮时内容区发生改变,左右滑动内容区时导航按钮跟随切换高亮,停留在某个内容区时刷新页面后仍然停留在当前内容区. ...
- js 控制Div循环显示 非插件版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Js控制显示、隐藏文本框中的密码
Js控制显示.隐藏文本框中的密码,也可称为是一款小型的JavaScript星号密码破解器,点击会显示出密码类型的文本框中的真实信息,再次点击则还原,程序 主要是获取HTML元素对象,然后强制更改元素属 ...
- JS控制DIV隐藏显示
转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...
随机推荐
- FI CO 常用表
FI CO 常用表 最近写FICO的报表写得有点多,许多Table记不住,用F1查找又有点费事,不如把表单写下来,以后用到,直接在这上面找得了. 1,账目表主数据 SKA1 SKB1 S ...
- HDU 6215 Brute Force Sorting(链表)
http://acm.hdu.edu.cn/showproblem.php?pid=6215 题意:给出一个序列,对于每个数,它必须大于等于它前一个数,小于等于后一个数,如果不满足,就删去.然后继续去 ...
- Go 灵活多变的切片Slice
我们知道数组定义好之后其长度就无法再修改,但是,在实际开发过程中,有时候我们并不知道需要多大的数组,我们期望数组的长度是可变的, 在 Go 中有一种数据结构切片(Slice) 解决了这个问题,它是可变 ...
- Js操作Cookie的实现
- template-web.js 引用变量、函数
1.关键字 $imports.+变量/函数 {{if $imports.myParseInt(b.health_money)}} <span class="num"> ...
- 小程序之image图片实现宽度100%,高度自适应
哇 今天搞了半天 图片一直变形啊啊啊啊 宽度100% 高度给100% 给auto 完全不管用啊啊啊啊 然后最后最终!!!! 首先我们要给我们的图片一个100%的宽度!让它自适应!! .g ...
- activity 运行流程
图1 图2 图3 图四
- loglog()函数
数据: xd = [1, 2, 3] yd = [0.6, 0.2, 0.2] matlab中双对数函数: 命令: loglog(xd, yd, 'blacko-', 'MarkerFaceColor ...
- R语言 set.seed()函数
看了几个帖子,说得不是特别清楚,特重新描述如下: set.seed()函数是为了保证你随机生成的随机数前后一致,看效果 首先,不设置该种子函数. x=rnorm(10) plot(x)绘出的图如下: ...
- vue.js环境配置步骤及npm run dev报错解决方案
安装完成后,使用npm run dev 运行,成功后,就可以在浏览器中看到vue的欢迎画面了 最后一步可能报错,我就遇到这样的问题了, 个人问题仅供参考: ERROR Failed to compil ...