Question

如何使用左，右和空格键在两个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>

Answer 1

这是类非常有用的完美示例。您可以将一个活动的类添加到最后一次单击的列表中。然后将其定位为您的移动。

http://jsfiddle.net/mmTra/

//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");

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

1 个答案: