如何从Materialize Scrollspy插件中获取元素名称

Materialize是一款现代化的响应式前端开发框架，提供了丰富的UI组件和交互效果。其中，Materialize Scrollspy插件用于创建导航条与页面内容的关联，并实现滚动时的高亮效果。

要从Materialize Scrollspy插件中获取元素名称，可以按照以下步骤进行操作：

在HTML文件中引入Materialize的CSS和JS文件，确保插件正常工作。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

在HTML文件中设置导航条和对应的页面内容。导航条需要添加class="scrollspy"属性，并设置data-target属性为对应页面内容的ID。

<ul class="scrollspy" data-target="section">
  <li><a href="#section1">Section 1</a></li>
  <li><a href="#section2">Section 2</a></li>
  <li><a href="#section3">Section 3</a></li>
</ul>

<div id="section1">Section 1 Content</div>
<div id="section2">Section 2 Content</div>
<div id="section3">Section 3 Content</div>

初始化Scrollspy插件。在JavaScript文件中使用M.ScrollSpy.init()方法对导航条进行初始化。

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.scrollspy');
  var instances = M.ScrollSpy.init(elems, options);
});

获取元素名称。使用JavaScript的DOM操作方法，可以通过遍历导航条的链接元素，获取对应元素的名称。

var links = document.querySelectorAll('.scrollspy li a');
var elementNames = [];
links.forEach(function(link) {
  elementNames.push(link.innerText);
});
console.log(elementNames);

完成上述步骤后，控制台将输出导航条中链接元素的名称。这样，就可以从Materialize Scrollspy插件中获取元素名称。

推荐的腾讯云产品和产品介绍链接地址：