这次我主要是想要完成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. 《javascript高级程序设计》笔记三

    第三章 基本概念 任何语言的核心必然会描述这门语言最基本的工作原理.这部分内容对我们来说,读起来很乏味,甚至会产生困意,但这部分内容却是重要的!我有幸拜读<JavaScript高级程序设计> ...

  2. win7休眠的开启与关闭方法

    从开始菜单中找到“附件→命令提示符”,右击选择“以管理员身份运行”,此时可能需要输入管理员密码或进行UAC确认,手工输入如下命令:powercfg -a,从这里可以清楚的看到,计算机是支持休眠的,只是 ...

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

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

  4. Http异步发送之HttpWebRequest的BeginGetResponse

    关于http异步发送,一开始我的做法都是用thread或者task去完成的:后来发现HttpWebRequest本身就提供一个异步的方法. 总感觉.Net自己提供的异步方法可能要优于我们自己用线程去实 ...

  5. Mac用ssh登录Ubuntu14.04

    在Ubuntu上配置ssh-server sudo apt-get install openssh-server  然后确认ssh-server是否启动  ps -e | grep ssh 如果存在s ...

  6. python实现简单的循环购物车小功能

    python实现简单的循环购物车小功能 # -*- coding: utf-8 -*- __author__ = 'hujianli' shopping = [ ("iphone6s&quo ...

  7. c# ProxyServer 代理服务器 不是很稳定

    /**C# Programming Tips & Techniquesby Charles Wright, Kris Jamsa Publisher: Osborne/McGraw-Hill ...

  8. Android原生跳转React不同页面（undefined is not an object）

    继续上篇文章的demo,由于现在的项目是原生的,打算用部分页面试下react native,那么问题来了:react貌似只有一个入口 index.android.js,那么在不同的原生页面需要跳转到不 ...

  9. 1.0 配置 appium + java的环境

    1. 配置 appim的环境前面中写到.       2. 在eclipse中配置 java 环境, 具体步骤:       <1>:在 eclipse 中新建 一个java 项目.   ...

  10. ES6的转换器

    ---恢复内容开始--- ES6代码转为ES5代码的转换器 1.Babel 2.Traceur,Google公司出品 Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有 ...