如何使用javascript或jquery将此菜单栏链接到此div内容中？

Question

当前当你点击一个div框时，它会在屏幕上向左移动，下一个div框会从右侧移动到屏幕上。需要的是，单击菜单链接滚动到相应的div容器。 E.g点击链接5滚动到div＃5任何人都可以帮助我...？这将是一个很大的帮助家伙。

HTML

<ul class="btns"> 
     <li><a href="#" rel="box1">1</a></li> 
     <li><a href="#" rel="box2">2</a></li> 
     <li><a href="#" rel="box3">3</a></li> 
     <li><a href="#" rel="box4">4</a></li> 
     <li><a href="#" rel="box5">5</a></li>   
    </ul> 

    <div id="container"> 

     <div id="box1" class="box">Div #1</div> 
     <div id="box2" class="box">Div #2</div> 
     <div id="box3" class="box">Div #3</div> 
     <div id="box4" class="box">Div #4</div> 
     <div id="box5" class="box">Div #5</div> 

    </div>​ 

的Javascript和jQuery部分：

$('.btns>li a').click(function() { 
       var page = $(this).attr('rel'); 
      });     


      $('.box').click(function() { 
       $('.box').each(function() { 
        if ($(this).offset().left < 0) { 
         $(this).css("left", "150%"); 
        } 
       }); 

       $(this).animate({ 
        left: '-50%' 
       }, 500); 

       if ($(this).next().size() > 0) { 
        $(this).next().animate({ 
         left: '50%' 
        }, 500); 
       } else { 
        $(this).prevAll().last().animate({ 
         left: '50%' 
        }, 500); 
       } 
      });​ 

例子：http://jsfiddle.net/gHYSN/5/

Answer 1

没有测试这一点，但我认为它应该给你的基本理念。

$(".btns a").each(function(index, a) { 
    $(a).click(function() { 
     var boxnum = index + 1; 
     $(window).scrollTop($("#box" + boxnum).offset().top); 
    }); 
} 

Answer 2

好的，这可能不是最好的方法，但它是按要求工作的。

function swdiv(currID, nxtID) { 
    $('.box').each(function() { 
     if ($(this).offset().left < 0) { 
      $(this).css("left", "150%"); 
     } 
    }); 
    $('#' + currID).animate({ 
     left: '-50%' 
    }, 500); 
    if ($('#' + nxtID).size() > 0) { 
     $('#' + nxtID).animate({ 
      left: '50%' 
     }, 500); 
    } 
} 

$('.btns li a').click(function() { 
    var page = $(this).attr('rel'), 
     curID = 'box1', 
     iWide = $(window).width()/2; 
    $('.box').each(function() { 
     if ($(this).css('left') == iWide + 'px') { 
      curID = $(this).attr('id'); 
     } 
    }); 
    swdiv(curID, page); 
}); 
$('.box').click(function() { 
    $('.box').each(function() { 
     if ($(this).offset().left < 0) { 
      $(this).css("left", "150%"); 
     } 
    }); 
    $(this).animate({ 
     left: '-50%' 
    }, 500); 
    if ($(this).next().size() > 0) { 
     $(this).next().animate({ 
      left: '50%' 
     }, 500); 
    } else { 
     $(this).prevAll().last().animate({ 
      left: '50%' 
     }, 500); 
    } 
}); 

我创建了一个额外的功能，两个div S之间进行切换。请在fiddle上查看第8次更新。