当我到达页面中的某些“部分”时,我正在尝试使用 jQuery-One-Page-Nav 的单页解决方案来突出显示菜单链接(并单击以滚动到相应的部分)。
在这部分内部我有一些像代码
的帖子<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 感到满意,效果非常好,我可以使用导航菜单浏览“部分”。
但我需要添加两个按钮或两个箭头,它们的工作方式与上一个下一个链接在我的帖子中滚动页面 class =“post”
我正在使用 https://github.com/davist11/jQuery-One-Page-Nav 和 https://github.com/flesler/jquery.serialScroll 没有奇怪的代码更改(只重命名的ID和类)但我不能让它们共存:它只能运行其中一个!
是否有任何解决方案可以让它们共存,或者是否有一段代码可以让我同时拥有这两个功能?