html - 如何使用scrollspy在顶部下拉列表导航中显示当前节的名称？

我想使用bootstrap scrollspy在下拉选项卡上显示该部分的名称。现在滚动时，我只会看到section（我将排除在外），并且希望在下拉栏中看到当前部分，就像未打开该部分一样。因此，当我在滚动时触摸section 2时，我想在顶部的下拉栏中看到section 2。首先，当然，我希望该栏显示section 1。

这是我的代码：https://codepen.io/alyssaalex/pen/rNNGrLy

如果有人可以在这方面提供一些帮助，我将不胜感激。谢谢！

最佳答案

您需要在更改部分时触发事件。然后获取部分名称并放入下拉标题。

将此代码添加到您的JS中

$(".navbar").on("activate.bs.scrollspy", function(){
  $("#section_ddl").html('');
  var sections = new Array("Section 1", "Section 2");
  var x = $(".nav li.active > a").text();
  if(sections.indexOf(x) != -1){
    $("#section_ddl").html(x + '<span class="caret"></span>');
  }
  else {
    $("#section_ddl").html('Section <span class="caret"></span>');
  }
});

如果添加/删除节，则只需将节名称放在sections数组中。

注意：section_ddl是下拉列表的ID。

You can see the working example here

关于html - 如何使用scrollspy在顶部下拉列表导航中显示当前节的名称？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58626243/