0

嗨，我想为在 div1 中单击的每个菜单加载 div2 中的缩略图。当前代码显示在 pageload 上的缩略图。它仅在菜单单击时显示。而且当我单击缩略图时，它应该在 div3 中显示差异显示内容。如何为使用差异内容（图像和文本）单击的每个缩略图动态加载 div3。检查此 url 以了解我正在规划的布局 在此处输入链接描述

    <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>
4

1 回答 1

0

我添加了 2 个 div，但如果您想添加更多 div，请查看 JavaScript 方法。

$(".text").hide();

$("#left a.one").click(function() {
  $(".text").hide();
  $("#textOne").fadeIn();
  return false;
});

$("#left a.two").click(function() {
  $(".text").hide();
  $("#textTwo").fadeIn();
  return false;
});

$("#left a.three").click(function() {
  $(".text").hide();
  $("#textThree").fadeIn();
  return false;
});
a {
  text-decoration: none;
}

#wrapper {
  width: 600px;
}

#left {
  margin-top: 100px;
  overflow: hidden;
  float: left;
  width: 20%;
}

#right {
  overflow: hidden;
  float: left;
  width: 80%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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="right">
    <!-- Each div here will contain the text to be show on the right -->
    <div id="textOne" class="text" style="display:block;">
      <h1>one</h1>

      <p>Zzril amet nisl consequat claritas litterarum. In aliquam dolore qui diam veniam. Ut exerci ullamcorper ut sit dolor.</p>
    </div>
    <div id="textTwo" class="text">
      <h1>two</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>three</h1>

      <p>Qui nobis nulla eu in lectores. Legunt possim diam me nisl nostrud. Legere claritatem duis anteposuerit aliquip et.</p>
    </div>
  </div>
</div>

jsfiddle

于 2013-05-20T08:49:50.653 回答