Question

我正在使用这里的单页滚动脚本; https://github.com/peachananr/onepage-scroll。它工作得很好。我发现菜单是在js脚本中生成的，现在它们是子弹。我更喜欢在我的子弹旁边放置文字，但由于我对jquery不太熟悉，所以我不知道如何做到这一点。

在互联网上的某个地方，我发现我需要在我的

之前添加它

     <script>
  $(document).ready(function(){
  $(".main").onepage_scroll({
    sectionContainer: "section"
  });
  $("#scroll").click(function(){
  $(".main").jumpTo($(this).data("target"));
  });
    });

</script>

并将其添加到插件网站上的js中;

 $.fn.jumpTo = function(newIndex) {
var el = $(this)
index = $(settings.sectionContainer +".active").data("index");
current = $(settings.sectionContainer + "[data-index='" + index + "']");
next = $(settings.sectionContainer + "[data-index='" + (newIndex+1) + "']");
if(next.length < 1) {
if (settings.loop == true) {
pos = 0;
next = $(settings.sectionContainer + "[data-index='" + (newIndex) + "']");
} else {
return
}

}else {
pos = (newIndex * 100) * -1;
}

current.removeClass("active")
next.addClass("active");
if(settings.pagination == true) {
$(".onepage-pagination li a" + "[data-index='" + index + "']").removeClass("active");
$(".onepage-pagination li a" + "[data-index='" + next.data("index") + "']").addClass("active");
}

$("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, '');
$("body").addClass("viewing-page-"+next.data("index"))

if (history.replaceState && settings.updateURL == true) {
var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (index + 1);
history.pushState( {}, document.title, href );
}
el.transformPage(settings, pos, newIndex);
}

所以我做到了。我用这段代码定义了我的菜单，也给出了;

    <ul class="nav navbar-nav">
<li><a href="#" data-target="1" id="scroll">Page 1</a></li>
<li><a href="#" data-target="2" id="scroll">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>

但旧的子弹菜单仍在那里，没有任何改变。我在这里上传了一个测试页面，因为我似乎无法把所有东西变成小提琴。 http://kellyvuijst.nl/konijntjes/test4.html

我不确定为什么这不起作用，或者我是否会采用完全错误的方法。

OnePageScroll文本而不是用于导航的项目符号

0 个答案: