錨定到相同類的div

我正在創建導航，我對Jquery不太好。我只需要<a id="prev">和<a id="next">作爲鏈接，使瀏覽器具有相同的類，但不是按順序的前一個和下一個div。一個簡單的「假」jquery錨，使用類而不是id。錨定到相同類的div

有什麼想法？

<a name="previousDiv" id="prev">Previous</a> 
<a name="nextDiv" id="next">Next</a> 

<!-- Display #1 --> 

<div class="display" id="first"> 
Content 
</div> 

<!-- Display #2 --> 

<div class="display" > 
Content 
</div> 

<!-- Display #3 --> 

<div class="display" > 
Content 
</div>

這是我的代碼，但it's不工作：

$(document).ready(function() { 

    function linkManager() { 
     var first = $('#first'); 
     var previous = $('#prev'); 
     var next = $('#next'); 
     if (first.prev('.display').length) { 
      previous.attr('href', '#goBack'); 
     } else { 
      previous.removeAttr('href'); 
     } 
     if (first.next('.display').length) { 
      next.attr('href', '#goForward'); 
     } else { 
      next.removeAttr('href'); 
     } 
    } 
    function scroller() { 
     var container = $('window'); 
     var first = $('#first'); 
     var cScroll = container.scrollTop(); 
     var paddingCompensation = parseFloat(first.css('paddingTop')); 
     var cRelPos = first.position().top - (paddingCompensation * 2); 
     container.animate({ 
      'scrollTop': cScroll + cRelPos 
     }, 'slow'); 
     linkManager(); 
    } 
    function attributeHandler(object, type) { 
     if (object.attr('href')) { 
      var active = $('#first'); 
      active.removeAttr('id'); 
      if (type == 'rew') { 
       active.prev('.display').attr('id', 'highlight'); 
      } else if (type == 'fwd') { 
       active.next('.display').attr('id', 'highlight'); 
      } 
      scroller(); 
     } 
    } 
    $('#prev').click(function() { 
     attributeHandler($(this), 'rew'); 
    }); 
    $('#next').click(function() { 
     attributeHandler($(this), 'fwd'); 
    }); 
    linkManager(); 
})();

來源

2011-06-15 pablo

我們可以看到一些圍繞''標籤標記的好嗎？整個導航菜單會很好。 – Bojangles 2011-06-15 08:04:35

這是什麼樣的這可能是最好的實現服務器端的事情。無論如何，你應該在那裏製作你的分頁導航。更容易訪問當前頁碼以決定下一步/上一步應該去哪裏等等。

來源

2011-06-15 08:20:20

它只是在同一個文件中的鏈接。代理#anchors – pablo 2011-06-15 08:23:18

對不起，沒有完全閱讀...我會盡快發佈... – 2011-06-15 09:33:34

謝謝，我想我需要使用jQuery.LocalScroll，但對於類..我很失去誠實。 – pablo 2011-06-15 10:14:47

剛剛發現在Webdesigners牆答案：

<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script> 

<script type="text/javascript"> 
$(function() { 

    function scroll(direction) { 

     var scroll, i, 
       positions = [], 
       here = $(window).scrollTop(), 
       collection = $('.post'); 

     collection.each(function() { 
      positions.push(parseInt($(this).offset()['top'],10)); 
     }); 

     for(i = 0; i < positions.length; i++) { 
      if (direction == 'next' && positions[i] > here) { scroll = collection.get(i); break; } 
      if (direction == 'prev' && i > 0 && positions[i] >= here) { scroll = collection.get(i-1); break; } 
     } 

     if (scroll) { 
      $.scrollTo(scroll, { 
       duration: 750  
      }); 
     } 

     return false; 
    } 

    $("#next,#prev").click(function() {   
     return scroll($(this).attr('id'));   
    }); 

    $(".scrolltoanchor").click(function() { 
     $.scrollTo($($(this).attr("href")), { 
      duration: 750 
     }); 
     return false; 
    }); 

}); 
</script>

來源

2011-06-15 16:12:29 pablo

錨定到相同類的div

回答

相關問題