有一個導覽列列表，以及對應的內容部分，想要實現的效果是，除了能夠定位到指定的部分，還要加亮點擊的導航條目。
一 可切換式標籤頁 /可切換式標籤列表
這個方式是參考可切換式標籤頁，無需寫任何JavaScript代碼，只需簡單的為頁面元素指定data-toggle="tab" 或 data-toggle="pill"屬性即可啟用標籤頁或膠囊式標籤頁。為ul添加nav 和nav-tabs classe，即可為其添加Bootstrap的標籤頁樣式。
- <ul class="nav nav-tabs">
- <li><a href="#home" data-toggle="tab">首頁</a></li>
- <li><a href="#profile" data-toggle="tab">Profile</a></li>
- <li><a href="#messages" data-toggle="tab">Messages</a></li>
- <li><a href="#settings" data-toggle="tab">Settings</a></li>
- </ul>
也可以用js代碼來控制：
- <ul class="nav nav-tabs" id="myTab">
- <li class="active"><a href="#home">..</a></li>
- <li><a href="#profile">Profile</a></li>
- <li><a href="#messages">Messages</a></li>
- <li><a href="#settings">Settings</a></li>
- </ul>
- <div >
- <div id="home">...</div>
- <div id="profile">...</div>
- <div id="messages">...</div>
- <div id="settings">...</div>
- </div>
- <script>
- $(function () {
- $('#myTab a').click(function (e) {
- e.preventDefault();
- $(this).tab('show');
- })
- })
- </script>
但是同樣的效果不能作用在標籤列表中，因為列表對應的部分是都顯示的，只是捲軸位置不同。所以做了一些修改，加入了定位對應section的代碼。
- $('#navi_tabs a').click(function (e) {
- e.preventDefault();
- $(this).tab('show');
- var id = $(this).attr("href");
- $.scrollTo(id,100,{offset:-50});
- })
二 滾動監聽
相對於第一種方法的稍許曲折，滾動監聽實現起來就簡單多了。JS的實現如下：
- $('#nav_tabs').scrollspy()
但是實現中，可能是由於內容是在整個頁面範圍的，上述方法無效，只能通過更改body標籤屬性的方式：
- <body data-spy="scroll" data-target=".navbar">...</body>
- 或者
- $('body').attr('data-spy','scroll');
- $('body').attr('data-target',"#navi_div");
