btn_reset/radio.html at master · onlyH/btn_reset · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				font: 12px/22px "微软雅黑";
			}

			.type {
				width: 400px;
				height: 32px;
				border: 1px solid #DFDFDF;
				margin: 30px auto;
			}

			dl {
				padding-left: 15px;
			}

			dt,
			dd {
				float: left;
				line-height: 32px;
			}

			dd {
				margin: 0 10px 0 8px;
				padding-left: 23px;
			}

			a {
				color: #000000;
				text-decoration: none;
				display: block;
				position: relative;
				line-height: 32px;
			}

			a:hover {
				color: #CC0000;
				text-decoration: underline;
			}

			a:hover b {
				background: url(images/radiobutton.gif) no-repeat -14px -118px;
			}

			b {
				width: 20px;
				height: 20px;
				background: url(images/radiobutton.gif) no-repeat -14px -18px;
				display: block;
				position: absolute;
				top: 6px;
				left: 0;
				margin-left: -25px;
			}

			.select b {
				background-position: -14px -218px;
			}
		</style>
	</head>

	<body>
		<!--传统表单提交方式-->
		<!--<form action="#" method="post" name="typeForm">
			<label for ="">配送类型</label>
			<input type="radio" name="type" checked="checked" /><label for="">全部</label>
			<input type="radio" name="type"  /><label for="">京东</label>
			<input type="radio" name="type" /><label for="">淘宝</label>

		</form>-->
		<div class="type">
			<dl id="type">
				<dt>配送类型</dt>
				<dd class="select" onclick="show(0)">
					<a href="javascript:;"><b></b>全部</a>
				</dd>
				<dd onclick="show(1)">
					<a href="javascript:;"><b></b>京东</a>
				</dd>
				<dd onclick="show(2)">
					<a href="javascript:;"><b></b>淘宝</a>
				</dd>
			</dl>
		</div>
		<script type="text/javascript">
			function show(index) {
				dd = document.getElementById('type').getElementsByTagName('dd');
				for(var i = 0; i < dd.length; i++) {
					if(i == index) {
						dd[i].className = 'select';
					} else {
						dd[i].className = null;
					}
				}
			}
		</script>
	</body>

</html>