Jquery 如何使用左、右和空格键在两个ul列表之间实现独立的水平滚动？_Jquery

Jquery 如何使用左、右和空格键在两个ul列表之间实现独立的水平滚动？

jquery

Jquery 如何使用左、右和空格键在两个ul列表之间实现独立的水平滚动？,jquery,Jquery,如何使用左、右和空格键在两个ul列表之间实现独立的水平滚动？我可以在加载文档时滚动listA，但需要一种独立于listA滚动listB的方法 <HTML> <HEAD> <TITLE>Layout Example</TITLE> <SCRIPT type="text/javascript" src="jquery-1.6.2.min.js"></SCRIPT> <script type="

如何使用左、右和空格键在两个ul列表之间实现独立的水平滚动？我可以在加载文档时滚动listA，但需要一种独立于listA滚动listB的方法

   <HTML>
   <HEAD>
   <TITLE>Layout Example</TITLE>
   <SCRIPT type="text/javascript" src="jquery-1.6.2.min.js"></SCRIPT>
   <script type="text/javascript">
   $(document).ready(function()
   {
      $("#containerA ul li:first").addClass("highlight");
      $("#containerB ul li:first").addClass("highlight");

              $(document).keydown(function(e)
              {                        
                    if(e.which == 37)
                    {      
                          $("#containerA ul li.highlight").removeClass("highlight").prev().addClass("highlight");

                    }else if(e.which == 39 || e.which == 32)  
                    {

                          $("#containerA ul li.highlight").removeClass("highlight").next().addClass("highlight");
                    }
              });


 });
 </script>
 <style>
 .highlight
 {
     background-color: blue;
     color: white;
 }
 #containerA, #containerB
 {
     height: 100px;
     width: 999px;
     background-color: black;
     color: white;
     text-align: center;
     position: relative;
     border: 5px solid blue;
     padding: 5px;
 }
 ul
 {
     list-style-type: none;
     margin: 0px;
     padding: 5px;
     line-height: 2;
     margin-top: 15px;
     margin-left: 20px;
     margin-right: auto;      
 }
 li
 {
     background-color: gray;
     width: 100px;
     float: left;
     margin-right: 4px;
     margin-top: 3px;
 }
 </style>
 </HEAD>
 <BODY>
 <div id="containerA"> List A
  <ul id="listA">
              <li>aaaaaaaaa </li>
              <li>bbbbbbbbb </li>
              <li>ccccccccc </li>
              <li>ddddddddd </li>
              <li>eeeeeeeee </li>
              <li>fffffffff </li>
              <li>ggggggggg </li>
              <li>hhhhhhhhh </li>
              <li>iiiiiiiii </li>
  </ul>
 </div>
 <div id="containerB"> List B
  <ul id="listB">
              <li>aaaaaaaaa </li>
              <li>bbbbbbbbb </li>
              <li>ccccccccc </li>
              <li>ddddddddd </li>
              <li>eeeeeeeee </li>
              <li>fffffffff </li>
              <li>ggggggggg </li>
              <li>hhhhhhhhh </li>
              <li>iiiiiiiii </li>
  </ul>
 </div>
 </BODY>
 </HTML>

这是一个很好的例子，说明了类在哪里非常有用。您可以将活动类添加到上次单击的列表中。然后瞄准你的运动

超级感谢Herman先生理解我的问题并提供了有效的解决方案。

//on click activate list
$('.listcontainer').click( function() {
    $('.active').removeClass('active');
    $(this).addClass('active');
});

//target active container for highlighting
$("div.active ul li.highlight").removeClass("highlight").prev().addClass("highlight");