2

我正在尝试使用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很满意，它运行良好，我可以使用导航菜单浏览“部分”。

但我需要添加两个按钮或两个箭头，它们的工作方式类似于通过我的帖子滚动页面的 prev-next 链接class="post"

我正在使用 https://github.com/davist11/jQuery-One-Page-Nav 和 https://github.com/flesler/jquery.serialScroll没有对代码 进行奇怪的更改（仅重命名了 id 和类）但是我不能让它们共存：它只适用于其中之一！

是否有任何解决方案可以使它们共存，或者是否有一段代码可以让我同时拥有这两个功能？

4

0 回答 0