有一个导航栏列表，以及对应的内容部分，想要实现的效果是，除了能够定位到指定的部分，还要加亮点击的导航条目。
一 可切换式标签页 / 可切换式标签列表
这个方式是参考可切换式标签页，无需写任何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");
阅读(13365) | 评论(0) | 转发(0) |
