您好，我正在主页上设计垂直导航。第一个垂直菜单是链接列表。每次单击时都应加载与主菜单列表垂直平行的一组缩略图。我的问题是 jscript 在页面加载时同时加载缩略图。它应该只有第一个菜单缩略图。单击第二个菜单时，它应该只加载第二组缩略图。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
<style>
body {
padding:0;
margin:50px;
}
#container{
width: 100%;
font-size: 12px;
top:30;
flot:center;
overflow: hidden; /* contain floated elements */
background: #fff }
#mainmenu {
height:600px;
overflow:hidden;
position:relative;
background-color:#ffaa00;
float: left;
width: 10%;
}
#sidebar1 {
margin-top:300;margin-bottom:200;
height:600px;
overflow:hidden;
position:relative;
background-color:#fff;
float: left;
width: 10%;
}
#sidebar2 {
margin-top:300;margin-bottom:200;
height:600px;
overflow:hidden;
position:relative;
background-color:#fff;
float: left;
width: 10%;
}
#menu1 {
margin-top:40;
list-style:none;
padding:0;
margin:0;
position:relative;
height:100%;
width:30px;
}
#menu1 li {
padding:10px;
position:relative;
text-align:left;
display:block;
cursor:hand;
cursor:pointer;
}
#menu1 li span {
height:600px;
font-family:georgia, arial;
font-size:9px;
color:#464646;
}
#menu2 li {
padding:10px;
position:relative;
text-align:left;
display:block;
cursor:hand;
cursor:pointer;
}
#menu2 li span {
height:600px;
font-family:georgia, arial;
font-size:9px;
color:#464646;
}
#right1 {
overflow:hidden;
float: left;
width: 80%;
position:relative;
float:right;
background-color:#fff;
}
#right2 {
overflow:hidden;
float: left;
width: 80%;
position:relative;
float:right;
background-color:#fff;
}
</style>
</head>
<div id="container">
<div id = "mainmenu">
<a href="#"><img src="/Users/blackbook/Downloads/rsz_riot_industries_2_1.jpg" height=300 width=150 alt="alt text" /></a>
<ul><a href="javascript:void()" class ="submenu1">Menu1</a></ul><ul><a href="#"class ="submenu2">MENU2 </a></li></ul>
</div>
<div id="sidebar1">
<ul id="menu1">
<li><a href="javascript:void()" class="one"><img src="" alt="alt text" /></a></li>
<li><a href="javascript:void()"class="two"><img src="" alt="alt text" /></a></li>
<li><a href="javascript:void()" class="three"><img src="" alt="alt text" /></a></li>
</ul>
</div>
<!-- <div id="sidebar2">
<ul id="menu2">
<li><a href="javascript:void()" class="four"><img src="" alt="alt text" /></a></li>
<li><a href="javascript:void()"class="five"><img src="" alt="alt text" /></a></li>
<li><a href="javascript:void()" class="six"><img src="" alt="alt text" /> </a></li>
</ul>
</div>
<!-- <div id="wrapper">
<div id="left">
<p><a href="javascript:void()" class="one">THUMBNAIL #1</a>
</p>
<p><a href="javascript:void()" class="two">THUMBNAIL #2</a>
</p>
<p><a href="javascript:void()" class="three">THUMBNAIL #3</a>
</p>
</div> -->
<div id="right1">
<!-- Each div here will contain the text to be show on the right -->
<div id="textOne" class="text" style="display:block;">
<h1>menu1 submenu1</h1>
<p>um. In aliquam dolore qui diisl consequat claritas litterarum. In aliquam dolore qui din aliquam dolore qui diam veniam. Ut exerci ullamcorper ut sit dolor.</p>
</div>
<div id="textTwo" class="text">
<h1>menu1 submenu2</h1>
<p>Qui nobis nulla eu in lectores. Legunt possim diam me nisl nostrud. Legere claritatem duis anteposuerit aliquip et.</p>
</div>
<div id="textThree" class="text">
<h1>menu1 submenu3</h1>
<p>Qui nobis nulla eu in lectores. Legunt possim diam me nisl nostrud. Legere claritatem duis anteposuerit aliquip et.</p>
</div>
</div>
<div id="textFour" class="text">
<h1>menu2 submenu1</h1>
<p>Qui nobis nulla eu in lectores. Legunt possim diam me nisl nostrud. Legere claritatem duis anteposuerit aliquip et.</p>
</div>
<div id="textFive" class="text">
<h1>menu2 submenu2</h1>
<p>Qui nobis nulla eu in lectores. Legunt possim diam me nisl nostrud. Legere claritatem duis anteposuerit aliquip et.</p>
</div>
<div id="textSix" class="text">
<h1>menu2 submenu3</h1>
<p>Qui nobis nulla eu in lectores. Legunt possim diam me nisl nostrud. Legere claritatem duis anteposuerit aliquip et.</p>
</div>
</div>
<div style="font-size:12px;color:#ccc"></div>
<script type="text/javascript">
/*$(document).ready(function() { */
$("#mainmenu a.submenu1").click(function () {
var colorOver = '#31b8da';
var colorOut = '#1f1f1f';
var padLeft = '20px';
var padRight = '20px';
var defpadLeft = $('#menu1 li a').css('paddingLeft');
var defpadRight = $('#menu1 li a').css('paddingRight');
$('#menu1 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 });
});
$('#sidebar1').mousemove(function(e) {
var s_top = parseInt($('#sidebar1').offset().top);
var s_bottom = parseInt($('#sidebar1').height() + s_top);
var mheight = parseInt($('#menu1 li').height() * $('#menu1 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);
$('#menu1').animate({top: top_value}, { queue:false, duration:500});
});
$(".text").hide();
$("#menu1 a.one").click(function () {
$(".text").hide();
$("#textOne").fadeIn();
return false;
});
$("#menu1 a.two").click(function () {
$(".text").hide();
$("#textTwo").fadeIn();
return false;
});
$("#menu1 a.three").click(function () {
$(".text").hide();
$("#textThree").fadeIn();
return false;
});
$("#menu2 a.four").click(function () {
$(".text").hide();
$("#textFour").fadeIn();
return false;
});
$("#menu2 a.five").click(function () {
$(".text").hide();
$("#textFive").fadeIn();
return false;
});
$("#menu2 a.six").click(function () {
$(".text").hide();
$("#textSix").fadeIn();
return false;
});
});
</script>
</body>
</html>