attr(),addClass()使用方法练习
这次我主要是想要完成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> </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" >√</font></li>
<li id="tuikType2" style="margin:0px;">我要退货<font id="tuikShow2" class="gou" >√</font></li>
</ul>
</div>
<div id="List2">
<ul>收获状态<span style="color:#de2827">*</span>
<li id="shouhType1">未收到货<font id="shouhShow1" class="gou" >√</font></li>
<li id="shouhType2" style="margin:0px;">已到收货<font id="shouhShow2" class="gou" >√</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>
