Question

嗨我想在div2中为div1中的每个菜单加载缩略图。当前代码缩略图显示在pageload.it shud只在菜单点击时显示。当我点击缩略图时它应该在div3中显示差异显示内容.how为每个用diff内容（imagage＆amp; 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>

Answer 1

我认为此链接可以帮助您 jsfiddle.net/PwqEX /

我添加了2个div但是如果你想添加更多div只需看看javascript方法

动态加载div中的缩略图和内容

1 个答案: