<!DOCTYPE html>
<html>
<head>
<title>移动</title>
<script src="jquery.min.js"></script>
<style>
li{
color:red;
}
li:hover{
color:blue;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var newcode = function() {
this.min1 = new Array();
this.min2 = new Array();
this.min1[0] = 1;
this.min1[1] = 2;
this.min1[2] = 3;
this.min2[0] = 1;
this.min2[1] = 2;
this.min2[2] = 3;
this.main1="";
this.main2="";
for (var i = 0; i < this.min1.length; i++) {
this.main1 += ("<li class="li">" + this.min1[i] + "</li>");
}
for (var i = 0; i < this.min2.length; i++) {
this.main2 += ("<li style="display:none;" class="li">" + this.min2[i] + "</li>");
}
$(".min1").html(this.main1);
$(".min2").html(this.main2);
this.sclick = function(value) {
$(".min1 li:eq("+value+")").hide();
$(".min2 li:eq("+value+")").show();
}
this.zclick = function(value) {
$(".min2 li:eq("+value+")").hide();
$(".min1 li:eq("+value+")").show();
}
}
ss = new newcode();
$(".min1").on('click','.li',function() {
ss.sclick($(this).index());
});
$(".min2").on('click','.li',function() {
ss.zclick($(this).index());
});
});
</script>
</head>
<body>
<div class="min1" style="500px;height:400px;border:solid 1px #000"></div>
<div class="min2" style="500px;height:400px;border:solid 1px #000"></div>
</body>
</html>
