87,985
社区成员




<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-2.1.4.js"></script>
<title>JS test</title>
<script type="text/javascript">
var i=1;
$(document).ready(function(){
$("#button2").click(function(){
if(i==1){
$("#div1").slideUp("slow");
$("#div2").slideDown("slow");
i++;
}
else if(i==2){
$("#div2").slideUp("slow");
$("#div3").slideDown("slow");
i++;
}
else if(i==3){
$("#div3").slideUp("slow");
$("#div1").slideDown("slow");
i=1;
}
});
$("#button1").click(function(){
if(i==1){
$("#div1").slideUp("slow");
$("#div3").slideDown("slow");
i=3;
}
else if(i==2){
$("#div2").slideUp("slow");
$("#div1").slideDown("slow");
i--;
}
else if(i==3){
$("#div3").slideUp("slow");
$("#div2").slideDown("slow");
i--;
}
});
});
</script>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
}
.top{
height: 100px;
width: 200px;
background-color: red;
}
.middle{
height: 400px;
width: 200px;
background-color: yellow;
}
.none{
display: none;
}
.middle ul{
margin: 0px;
}
.middle li{
display: block;
}
</style>
</head>
<body>
<div style="width:200px;">
<div id="button1"class="top"></div>
<div id="div1" class="middle">
<ul>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
</ul>
</div>
<div id="div2" class="middle none">
<ul>
<li>22222</li>
<li>22222</li>
<li>22222</li>
<li>22222</li>
<li>22222</li>
<li>22222</li>
<li>22222</li>
<li>22222</li>
<li>22222</li>
<li>22222</li>
<li>22222</li>
<li>22222</li>
</ul>
</div>
<div id="div3" class="middle none">
<ul>
<li>33333</li>
<li>33333</li>
<li>33333</li>
<li>33333</li>
<li>33333</li>
<li>33333</li>
<li>33333</li>
<li>33333</li>
<li>33333</li>
<li>33333</li>
<li>33333</li>
</ul>
</div>
<div id="button2" class="top"></div>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-2.1.4.js"></script>
<title>JS test</title>
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
$(".middle").slideDown("slow");
});
$("#button2").click(function(){
$(".middle").slideUp("slow");
});
});
</script>
<style type="text/css">
body{
margin: 0px;
padding: 0xp;
}
.top{
height: 100px;
width: 200px;
background-color: red;
}
.middle{
height: 400px;
width: 200px;
background-color: yellow;
overflow: auto;
}
.middle li{
display: block;
}
</style>
</head>
<body>
<div style="width:200px;">
<div id="button1"class="top"></div>
<div class="middle">
<ul>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
</ul>
</div>
<div id="button2" class="top"></div>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-2.1.4.js"></script>
<title>JS test</title>
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
$(".middle").slideDown("slow");
});
$("#button2").click(function(){
$(".middle").slideUp("slow");
});
});
</script>
<style type="text/css">
body{
margin: 0px;
padding: 0xp;
}
.top{
height: 100px;
width: 200px;
background-color: red;
}
.middle{
height: 400px;
width: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div style="width:200px;">
<div id="button1"class="top"></div>
<div class="middle"></div>
<div id="button2" class="top"></div>
</div>
</body>
</html>