我正在尝试使用 jQuery-One-Page-Nav 的单页解决方案,以便在我到达页面中的某些"sections"时突出显示菜单链接(并单击以滚动到相应的部分) .
在这部分内部我有一些像代码的帖子
<body>
<nav>
<ul class="menuslides">
<li class="item-1">
<a href="#section-1" >One</a>
</li>
<li class="item-2">
<a href="#section-2" >Two</a>
</li>
...
</ul>
</nav>
<div id="wrapper">
<div id="wrap">
<section id="section-1">
<div class="post" id="item-slide-1">img</div>
<div class="post" id="item-slide-2">img</div>
</section>
<section id="section-2">
<div class="post" id="item-slide-3">img</div>
<div class="post" id="item-slide-4">img</div>
<div class="post" id="item-slide-5">img</div>
</section>
...
<section id="section-10">
<div class="post" id="item-slide-31">img</div>
...
</section>
</div>
<div id="buttons">
<div id="button" class="goto-prev">Prev</div>
<div id="button" class="goto-next">Next</div>
</div>
</div>
<script>
jQuery(document).ready(function() {
jQuery('.menuslides').onePageNav();
});
jQuery(function( $ ){
$('#wrapper').serialScroll({
target:'#wrap',
items:'.post',
prev:'div.goto-prev',
next:'div.goto-next',
axis:'y',
duration:700,
onBefore:function( e, elem, $pane, $items, pos ){
e.preventDefault();
if( this.blur )
this.blur();
},
onAfter:function( elem ){
}
});
});
</script>
</body>
我对 jQuery-One-Page-Nav 很满意,效果非常好,我可以使用导航菜单浏览“ sections ” .
但我需要添加两个按钮或两个箭头 they work like a prev-next link 通过我的帖子滚动页面 class="post"
我正在使用https://github.com/davist11/jQuery-One-Page-Nav和https://github.com/flesler/jquery.serialScroll与 no weird changes to the code (仅重命名的ID和类)但我无法得到它们 coexist together :它只能运行其中一个!
有没有任何解决方案可以让它们共存,或者是否有一段代码可以让我同时拥有这两个功能?