这次我主要是想要完成2个li之间样式的变化。方法比较傻，如果有人有更好的办法或者有别问题，希望可以不吝指教。

<!DOCTYPE html>
<html>
<head>
<title>退款申请</title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
<meta name="format-detection" content="telephone=no">

<link href="__RESOURCE__/plus/css/font-awesome.min.css" rel="stylesheet">
<link href="__RESOURCE__/alert/jquery-confirm.min.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="__RESOURCE__/script/jquery-1.7.2.min.js"></script>

<script type="text/javascript">
var tuikType = 0;//退款类型1:我要退款;2:我要退货
var shouhType = 0;//退款类型1:未收到货;2:已收到货
$(document).ready(function(){
$("#tuikType1").click(function(){//这个js我觉得有一点反反复复，不知道有没有更简单的方法，求指教
tuikType = 1;
//alert(tuikType);
$("#tuikShow1.gou").attr("style","visibility:visible");
$("#tuikType1").addClass("red");
$("#tuikShow2.gou").attr("style","visibility:hidden");
$("#tuikType2").removeClass("red");});
$("#tuikType2").click(function(){
tuikType = 2;
//alert(tuikType);
$("#tuikShow2.gou").attr("style","visibility:visible");
$("#tuikType2").addClass("red");
$("#tuikShow1.gou").attr("style","visibility:hidden");
$("#tuikType1").removeClass("red");});
$("#shouhType1").click(function(){
shouhType = 1;
//alert(tuikType);
$("#shouhShow1.gou").attr("style","visibility:visible");
$("#shouhType1").addClass("red");
$("#shouhShow2.gou").attr("style","visibility:hidden");
$("#shouhType2").removeClass("red");});
$("#shouhType2").click(function(){
shouhType = 2;
//alert(tuikType);
$("#shouhShow2.gou").attr("style","visibility:visible");
$("#shouhType2").addClass("red");
$("#shouhShow1.gou").attr("style","visibility:hidden");
$("#shouhType1").removeClass("red");});
});
</script>

<!--<link rel="stylesheet" type="text/css" href="./styles.css">
<link rel="stylesheet" type="text/css" href="__RESOURCE__/plus/css/style_normal.css">-->
<style type="text/css">
body {margin:0px; background:#e8e7e7;width:100%;}

.header {height:44px; width:100%; background:#008cd7; border-bottom:1px solid #e3e3e3;}
.header .title {height:44px; width:auto;margin-left:10px;font-size:16px; line-height:44px;color:#fff;text-align:center;}

content{}
ul{font-family:"黑体"; font-size:10px;list-style:none;padding:0px;padding-left:15px;}
ul>font{color:#c6c6c6;}
li{margin-top:5px;height:40px;width:95%;background:#ffffff; font-size:10px;color:#565656;line-height:40px;overflow:hidden;border-bottom:1px solid #cacaca; }
li>font{color:#c6c6c6;}
.gou{color:#de2827;float:right;padding-right:10px;visibility :hidden;}
.red{color:#de2827;}
.xla_k{border:none;width:99%;height:100%}
.je{border:none;width:99%;height:100%}
.shuom{border:none;width:99%;height:100%}
option{width:100%;}

.take1 {height:20px;background:#ff771b; padding:10px 10px; margin-top:10px; color:#fff; }
</style>
</head>

<body>
<!--header start -->
<div id="header" name="header" class="header">
<div class="title" onclick="history.back()">
<span style="float:left"><i class="fa fa-chevron-left"></i>&nbsp;</span>退款申请

</div>

</div>
<!--header end -->

<!--content start -->
<div id="content" class="content">
<div id="List1">
<ul>退款类型<span style="color:#de2827">*</span>
<li id="tuikType1">我要退款<font>（无需退货）</font><font id="tuikShow1" class="gou" >&radic;</font></li>
<li id="tuikType2" style="margin:0px;">我要退货<font id="tuikShow2" class="gou" >&radic;</font></li>
</ul>

</div>
<div id="List2">
<ul>收获状态<span style="color:#de2827">*</span>
<li id="shouhType1">未收到货<font id="shouhShow1" class="gou" >&radic;</font></li>
<li id="shouhType2" style="margin:0px;">已到收货<font id="shouhShow2" class="gou" >&radic;</font></li>
</ul>

</div>
<div id="List3">
<ul>退款原因<span style="color:#de2827">*</span>
<li id="shouhType1"><select name="select" id="select_k1" class="xla_k">
<option value="0">选择品牌</option>
<option value="1">选择品牌1</option>
<option value="2">选择品牌2</option>
<option value="2">选择品牌2</option></select></li>
</ul>

</div>
<div id="List4">
<ul>退款金额<span style="color:#de2827">*</span><font >最多13.00</font>
<li id="tuikje"><input type="number" min="0" max="13" placeholder="请输入退款金额" class="je" /></li>
</ul>
</div>
<div id="List5">
<ul>退款说明<font >（可不填）</font>
<li id="tuikshuom"><input type="text" placeholder="请输入退款说明" class="shuom" /></li>
</ul>
</div>
</div>
<!--content end -->

<!--foorter start -->
<div id="foorter" class="foorter">
<div id="tj" style="margin-top:0px;text-align:center;">
<div class="take1" onclick="subform();" >提交</div>
</div>
</div>
<!--foorter end -->

<script type="text/javascript">

</script>
</body>
</html>

attr(),addClass()使用方法练习的更多相关文章

  1. input是否checked与使用jquery的attr或prop方法无关

    最近在项目中有这样一个需求,用户在下单时可以选择优惠券,也可取消选择,并且可以多次选择,取消. 这是一个典型的input标签checked功能,博主使用radio元素实现此需求,但是优惠券只能选中,不 ...

  2. jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

    jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...

  3. jquery中dom元素的attr和prop方法的理解

    一.背景 在编写使用高版本[ jQuery 1.6 开始新增了一个方法 prop()]的jquery插件进行编写js代码的时候,经常不知道dom元素的attr和prop方法到底有什么区别?各自有什么应 ...

  4. jQuery .attr()和.removeAttr()方法操作元素属性示例

    今天主要和大家一起分享一下如何使用jQuery的.attr()和.removeAttr()方法读取,添加,修改,删除元素的属性.大家在平时的Web页面制作中都有碰到如何动态的获取元素的属性和属性值,或 ...

  5. jQuery中attr和prop方法的区别

    jQuery中attr和prop方法的区别。 http://my.oschina.net/bosscheng/blog/125833 http://www.javascript100.com/?p=8 ...

  6. $().attr()的使用方法 &amp;&amp; $().html()与$().text()的差别

    <1>$().attr()的使用方法 </pre><pre class="html" name="code"><htm ...

  7. jQuery 中 attr() 和 prop() 方法的区别

    前几天,有人给 Multiple Select 插件 提了问题: setSelects doesn't work in Firefox when using jquery 1.9.0 一直都在用 jQ ...

  8. jquery $(this).attr $(this).val方法使用介绍--useful

    $(this).attr(key); 获取节点属性名的值,相当于getAttribute(key)方法,本文整理了一些相关的示例,感兴趣的朋友可以参考下 $(this).attr(key); 获取节点 ...

  9. JQuery之Attr()与Prop()方法

    一.Prop()的由来 JQuery 1.6开始 新增方法prop() prop()解决:表单元素中checked,selected,disabled等属性在方法attr()中可能会出现的不一致问题( ...

随机推荐

  1. v9 频道页如果有下级栏目跳转到第一个栏目链接

    {if $CATEGORYS[$catid]['child']==1} {php $firstarr = explode(',',$CATEGORYS[$catid]['arrchildid']);} ...

  2. JVM中class文件探索与解析（一）

    一直想成为一名优秀的架构师的我,转眼已经工作快两年了,对于java内核了解甚少,闲来时间,看看JVM,吧自己的一些研究写下来供大家参考,有不对的地方请指正. 废话不多说,一起来看看JVM中类文件是如何 ...

  3. 搭建带热更新功能的本地开发node server

    引言 使用webpack有一段时间了,对其中的热更新的大概理解是:对某个模块做了修改,页面只做局部更新而不需要刷新整个页面来进行更新.这样就能节省因为整个页面刷新所产生开销的时间,模块热加载加快了开发 ...

  4. java中打印输出数组

    import java.util.Arrays; public class ArrayDemo { public static void main(String[] args) { int size ...

  5. [leetcode-554-Brick Wall]

    There is a brick wall in front of you. The wall is rectangular and has several rows of bricks.The br ...

  6. Thrift总结(二)创建RPC服务

    前面介绍了thrift 基础的东西,怎么写thrift 语法规范编写脚本,如何生成相关的语言的接口.不清楚的可以看这个<Thrift总结(一)介绍>.做好之前的准备工作以后,下面就开始如何 ...

  7. JAVAEE——SSH三大框架整合（spring+struts2+hibernate）

    一.整合原理 二.导包(41个) 1.hibernate (1)hibernate/lib/required (2)hibernate/lib/jpa | java persist api java的 ...

  8. require.js（浅聊）

    一.require 了解requirejs之前首先明白什么是模块化: 1.什么是模块化? 模块化设计是指在对一定范围内的不同功能或相同功能不同性能.不同规格的产品进行功能分析的基础上,划分并设计出一系 ...

  9. vsftpd3.0之匿名用户配置

    有时候工作中为了方便上传下载文件,又不想在系统中添加用户并为用户创建密码,这时候就可以用匿名用户方式搭建FTP服务器,当然安全性我们不说,今天就为实现这么个简单而粗爆的FTP服务器,来看看都需要哪些配 ...

  10. 参数错误。 (异常来自 HRESULT:0x80070057 (E_INVALIDARG))

    异常来自 HRESULT:0x80070057 (E_INVALIDARG)未能加载程序集.......几次删除引用然后重新引用程序集还是报错 奔溃中....网上搜索还真有解决办法:解决方法 是 删除 ...