<!
DOCTYPE
html>
<
html
lang="
en">
<
head>
<
meta
charset="
UTF-8">
<
meta
name="
viewport"
content="
width=device-width, initial-scale=1.0">
<
meta
http-equiv="
X-UA-Compatible"
content="
ie=edge">
<
title>Document</
title>
<
script
src="
../js/jquery.min.js"></
script>
<
style>
input{width:
30px;height:
10px;}
#div1
div{width:
100px;height:
100px;border:
1px solid
#333;display: none}
.
active{background:
#f00}
</
style>
</
head>
<
body>
<
div
id="
div1">
<
div
style="
display: block">11</
div>
<
div>22</
div>
<
div>33</
div>
<
input
type="
button"
class="
active"/>
<
input
type="
button" />
<
input
type="
button" />
</
div>
<
script>
$(
function(){
$("
#div1").
find("
input").
click(
function(){
$(
this).
attr("
class","
active").
siblings("
input").
attr("
class","");
$("
#div1").
find("
div").
eq(
$(
this).
index('
input')).
css("
display",'
block').
siblings("
div").
css("
display",'
none')
})
})
</
script>
</
body>
</
html>