这次我主要是想要完成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. react实现双向绑定

    双向绑定功能是在项目中比较常见的一个需求,传统的js实现方式是添加监听函数的方式,Vue框架实现很简单,因为它本身就是基于双向绑定实现的,接下来我将讲解一下如何使用react实现双向绑定的功能是 首先 ...

  2. 限制input[type=number]的输入位数策略整理

    当我们使用类型number的input输入框的时候,我们可能需要限制输入的位数,这个时候通常会想到maxlength,但是maxlength是在number类型的时候是不支持的,下面是一些解决这种问题 ...

  3. php 多维数组简化（递归）

    <?php $a=[ 'a'=>['d'=>['aa'=>1,'bb'=>2,'cc'=>3]], 'b'=>['f'=>['dd'=>4,'ee ...

  4. Vim正则通配符使用心得

    目的 实现替换 c f[i][j][k] -> f[k][i][j] f[i + 1][j][k] -> f[k][i + 1][j] f[i + 1][j + NY][k] -> ...

  5. 暂停和播放CSS3动画的两种实现方法

    1,直接修改animationPlayState <!DOCTYPE html> <html> <head lang="en"> <met ...

  6. servlet+jsp update修改页面的实现，整整搞了两个小时才搞定

    package DAO; public class books { private int bid; private String bname; private int booksl; private ...

  7. gulp 入门指南

    gulp 是基于 node 实现 Web 前端自动化开发的工具,利用它能够极大的提高开发效率. 在 Web 前端开发工作中有很多"重复工作",比如压缩CSS/JS文件.而这些工作都 ...

  8. VB6之切换桌面

    Desktop的API,用于切换或者系统桌面环境.扩展起来可以做一个锁屏程序或者多桌面程序. 模块部分: 'desktop.bas 'too much struct and declare unuse ...

  9. vijos1010题解

    题目: 话说乾隆带着他的宰相刘罗锅和你出巡江南,被杭州城府邀请去听戏,至于什么戏,那就不知了.乾隆很高兴,撒酒与君臣共享.三更欲回住处,可是乾隆这人挺怪,他首先要到西湖边散散步,而且命令不准有人跟着他 ...

  10. Octopus——excel导入导出工具

    Octopus Octopus是一个简易的Excel导入导出工具.目前主要就两个功能: 导入:将excel中一行数据转换为指定的java对象,并通过指定的正则表达式检查合法性. 导出:按照给定的xml ...