jquery - 使用 jquery 专注于特定的 div

Question

html代码是这样的：

<div id="div1" class="all"> </div>
<div id="div2" class="all"> </div>
<div id="div3" class="all"> </div>
<div id="div4" class="all"> </div>
<div id="div5" class="all"> </div>
<div id="div6" class="all"> </div>
<div id="div7" class="all"> </div>

我在 jquery 中隐藏和显示 div，如下所示：

$(function () {

                 $('#div1').click(function () {

                     $('#div1').hide();    
                         $('#div2').show();  
                 });


                 $('#div2').click(function () {
                     $('#div2').hide();
                       $('#div1').show();
                });
    }); 

在 div1.show() 的第二部分；我喜欢将浏览器滚动到 div1。由于该页面的人口非常多，因此在单击之前转到原始 div 会很好。

Answer 1

您需要滚动到 div - 您可以使用 animate 来执行此操作。

这里有一个很好的例子

最好使用@sdespont 推荐的插件。它可以针对一个 DOM 元素（请参阅该页面上的第一个示例），您可以将 div 存储在变量中，然后在需要时转到该 DOM 元素。

所以，伪代码示例 - 这还没有经过测试，它只是一个关于它如何工作的想法：

  var clickedDiv; 
  $("#div1").click(function(){
     clickedDiv = $(this);
     $("#div2").scrollTo();
   });

  $("#div2").click(function(){
     $("#divHome").scrollTo({onAfter:function(){
        if (clickedDiv != null){
            $(clickedDiv).scrollTo()
         }
    }});    
 });