hi，我想为div1中单击的每个菜单加载div2中的缩略图。当前代码缩略图显示在pageload上。它仅在菜单单击时显示。而当我单击缩略图时，aslo也应在div3中显示差异显示内容。如何为差异内容（imagage＆text）单击的每个缩略图动态加载div3。检查此网址以了解我的布局是否正在规划中enter link description here
<head>
<title>Scroll Menu</title>
<script type="text/javascript" src="../js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../js/jquery.color.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#menu li').click(function () {
window.location = $(this).find('a').attr('href');
}).mouseover(function (){
$(this).find('a')
.animate( { paddingLeft: padLeft, paddingRight: padRight}, { queue:false, duration:100 } )
.animate( { backgroundColor: colorOver }, { queue:false, duration:200 });
}).mouseout(function () {
$(this).find('a')
.animate( { paddingLeft: defpadLeft, paddingRight: defpadRight}, { queue:false, duration:100 } )
.animate( { backgroundColor: colorOut }, { queue:false, duration:200 });
});
$('#sidebar').mousemove(function(e) {
var s_top = parseInt($('#sidebar').offset().top);
var s_bottom = parseInt($('#sidebar').height() + s_top);
var mheight = parseInt($('#menu li').height() * $('#menu li').length);
$('#debugging_mouse_axis').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
$('#debugging_status').html(Math.round(((s_top - e.pageY)/100) * mheight / 2));
var top_value = Math.round(( (s_top - e.pageY) /100) * mheight / 2);
$('#menu').animate({top: top_value}, { queue:false, duration:500});
});
});
</script>
<style>
body {
padding:0;
margin:0 20px;
}
#sidebar {
height:400px;
overflow:hidden;
position:relative;
background-color:#fff;
}
#menu {
width:100%;
list-style:none;
padding:0;
margin:0;
top:0;
position:relative;
height:100%;
width:300px;
}
#menu li {
padding:10px 0;
text-align:right;
display:block;
cursor:hand;
cursor:pointer;
}
#menu li a {
background:url() repeat #1f1f1f;
color:#ddd;
font-family:helvetica, arial, verdana;
font-size:9px;
font-weight:900;
display:inline;
padding:20px 8px 5px 20px;
text-decoration:none;
}
#menu li span {
font-family:georgia, arial;
font-size:9px;
color:#464646;
}
</head>
<div id = "mainmenu">
<ul><li><a href="#">MENU1</a></li><li><a href="#">MENU2</a></li>
</ul></div>
<div id="sidebar">
<ul id="menu">
<li><a href="#"><img src="img" alt="alt text" /></a></li>
<li><a href="#"><img src="" alt="alt text" /></a></li>
<li><a href="#"><img src="" alt="alt text" /></a></li>
<li><a href="#"><img src="" alt="alt text" /></a></li>
<li><a href="#"><img src="" alt="alt text" /></a></li></ul>
<ul id="menu">
<li><a href="#"><img src="" alt="alt text" /></a></li>
<li><a href="#"><img src="" alt="alt text" /></a></li>
<li><a href="#"><img src="" alt="alt text" /></a></li>
<li><a href="#"><img src="" alt="alt text" /></a></li><li><a href="#"><img src="" alt="alt text" /></a></li>
</ul>
</div>
<div id ="contentdisplay"
<ul><li>content display</li></ul></div>
<div style="font-size:12px;color:#ccc"></div>
</body>
</html>
我已经添加了2 div，但是如果您想添加更多div，请查看JavaScript方法。