Single Page與選單連動切換- jQuery-One-Page-Nav

最近越來越流行Single Page的網站，所以也衍生出了很多有趣的前端技術，這個外掛就是讓人可以在單頁切換選單的時候，可以跳到那個選項，或是移到某個選項也可以切換到那個選單。

外掛網址
jQuery-One-Page-Nav

他有使用另一個外掛，是用來scroll到特定位置的，所以兩隻都要引入

view plaincopy to clipboardprint

1. <script src="jquery.scrollTo.js"></script>  
2. <script src="jquery.nav.js"></script>  

然後準備類似下面的html

view plaincopy to clipboardprint

1. <ul id="nav">  
2.     <li class="current"><a href="#section-1">Section 1</a></li>  
3.     <li><a href="#section-2">Section 2</a></li>  
4.     <li"><a href="#section-3">Section 3</a></li>  
5. </ul>  
6.   
7. <div id="section-1">  
8.     <strong>Section 1</strong>  
9.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>  
10. </div>  
11.   
12. <div id="section-2">  
13.     <strong>Section 2</strong>  
14.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>  
15. </div>  
16.   
17. <div id="section-3">  
18.     <strong>Section 3</strong>  
19.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>  
20. </div>  

參考plugin頁的範例，再調整你要的東西，就完成了

view plaincopy to clipboardprint

1. $('#nav').onePageNav({   
2.     currentClass: 'current',   
3.     changeHash: false,   
4.     scrollSpeed: 750,   
5.     scrollOffset: 30,   
6.     scrollThreshold: 0.5,   
7.     filter: '',   
8.     easing: 'swing',   
9.     begin: function() {   
10.         //I get fired when the animation is starting   
11.     },   
12.     end: function() {   
13.         //I get fired when the animation is ending   
14.     },   
15.     scrollChange: function($currentListItem) {   
16.         //I get fired when you enter a section and I pass the list item of the section   
17.     }   
18. });  

Demo