更改实现scrollspy函数的默认外观

Question

我在我的网站上使用materializecss框架。我正在使用scrolllspy函数导航栏。但我想将红色的默认颜色更改为白色，并在导航链接下方从垂直线更改为水平线。

现在我有了这个

我想要的是

用于scrollspy函数的JS代码。

      $(document).ready(function(){
      $('.scrollspy').scrollSpy();
      });

我不知道要更改的具体课程。

Answer 1

如果您不想在网站上使用辅助目录，则可以更改目录类的CSS。

转到materialize.css文件，找到以下代码：

  .table-of-contents a.active {
    font-weight: 500;
    padding-left: 18px;
    border-left: 2px solid #ea4a4f;
  }

然后你可以用它替换它：

  .table-of-contents a.active {
    font-weight: 500;
    padding-left: 18px;
    border-bottom: 2px solid white;
  }

要查看结果，您必须在html中链接materialize.css文件而不是materialize.min.css。在生产环境中，您需要最小化修改后的materialize.css文件。

也许有点晚了，但我希望它会有所帮助。

Answer 2

of-content class，你可以像这样添加css

nav ul li a.active {
  border-bottom: 1px solid #333;
}

表示当元素 a 处于活动状态时，它将提供border-bottom