这次我主要是想要完成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. Linq用法笔记

    一.什么是Linq? LINQ即Language Integrated Query(语言集成查询),LINQ是集成到C#和Visual Basic.NET这些语言中用于提供查询数据能力的一个新特性. ...

  2. win7开启telnet客户端

  3. 架构漫谈系列(2) 封装（Encapsulation）

    这是这个系列的第二篇.在第二篇里,我决定讲一讲封装. 程序的不同部分应该用封装去互相隔离,模块之间应该不应该产生很随意的关联. 可能有的人觉得不解,又或觉得是有道理的废话,不急,先一步一步来. 我们先 ...

  4. java 字符串替换函数replaceAll 一次同时替换多个字符串

    public static void main(String[] args) throws Exception { String src = "南京市玄武区北京东路徐州市鼓楼区戏马台&quo ...

  5. linux下修改Apache配置文件

    linux下修改host文件host文件存放路径 /etc/hosts 可以用vim编辑 //Apache配置虚拟主机 /usr/local/apache/conf/extra/httpd-vhost ...

  6. [leetcode-543-Diameter of Binary Tree]

    Given a binary tree, you need to compute the length of the diameter of the tree. The diameter of a b ...

  7. html路径问题

     1.绝对路径     绝对路径是指文件在硬盘上真正存在的路径.例如"bg.jpg"这个图片是存放在硬盘的"E:\book\网页布局代码\第2章"目录下,那么 ...

  8. 1.Google Chrome浏览器 控制台全解析

    Google Chrome浏览器 控制台全解析 在Google Chrome浏览器出来之前,我一直使用FireFox,因为FireFox的插件非常丰富,更因为FireFox有强大的Firebug,对于 ...

  9. 微信小程序的开发环境搭建（Windows版本）

    前言: 小程序是指微信公众平台小程序,小程序可以帮助开发者快速的开发小程序,小程序可以在微信内被便捷地获取和传播:是一种不需要下载安装即可使用的应用小程序,和原有的三种公众号是并行的体系.2017年1 ...

  10. python实现希尔排序(已编程实现)

    希尔排序: 观察一下”插入排序“:其实不难发现她有个缺点: 如果当数据是”5, 4, 3, 2, 1“的时候,此时我们将“无序块”中的记录插入到“有序块”时,估计俺们要崩盘, 每次插入都要移动位置,此 ...