Javascript 如何使用Bootrap-4正确设置TOCBOT_Javascript_Html_Css_Bootstrap 4_Tableofcontents

Javascript 如何使用Bootrap-4正确设置TOCBOT

javascript html css bootstrap-4

Javascript 如何使用Bootrap-4正确设置TOCBOT,javascript,html,css,bootstrap-4,tableofcontents,Javascript,Html,Css,Bootstrap 4,Tableofcontents,我正在尝试使用名为的好插件。我有以下两个问题，希望有人能帮助我问题1：在那里，您可以看到一个白色的垂直条，它明显超出了列表项的范围。我认为酒吧的长度应该和垂直内容一样长。我有没有办法定制这个酒吧的宽度或长度。注意：此处未显示工具的参考 HTML代码： <body data-spy="scroll" data-target=".js-toc"> <div class="container-fluid"> <div class="row">

我正在尝试使用名为的好插件。我有以下两个问题，希望有人能帮助我

问题1：在那里，您可以看到一个白色的垂直条，它明显超出了列表项的范围。我认为酒吧的长度应该和垂直内容一样长。我有没有办法定制这个酒吧的宽度或长度

。注意：此处未显示工具的参考

HTML代码：

<body data-spy="scroll" data-target=".js-toc">
    <div class="container-fluid">
    <div class="row">
       <div class="col bg-dark">
          <nav class="js-toc sticky-top py-5"></nav>
       </div>
       <div class="col js-toc-content">
          some text1
          <h1 id="h1root">Root </h1>
          <h2 id="2">Subheading, h2</h2>
          Some text 2
          <h3 id="2">Third level heading</h3>
          Some text 3
          <h3 id="3">Another level 3 heading</h3>
          Some text 4
          <h2 id="4">A second subheading</h2>
          Some text 4   
       </div>
    </div>
</body>

问题2：我想能够使最后点击（当前）链接脱颖而出的颜色，背景色或边距设置。如何才能做到这一点？

试试这个

1）让我们更明确地设置CSS以覆盖tocs CSS，而不使用

！重要信息

body a.toc-link{
    color: wheat; 
}

2）使用

a.toc-link:：before

伪选择器创建白线。由于它使用的是

height:inherit

，因此高度可能会根据您使用的设备/屏幕大小而变化，因此让我们使用jQuery获取锚定标记的高度，并将其设置为白线的高度

var tocHeight = $('a.toc-link').height(); //18

3）我们不能直接使用JS设置

：：before

，因此我们必须将其作为

标记动态插入页面。请注意背面的记号和

${}

的使用-这称为JS

5）在CSS中创建

。单击类
body a.toc-link.clicked {
  color:red;
}

演示：
注：虽然白线与锚定标签的尺寸相同，但由于链接之间的边距/间距，存在间隙（请参见演示）。如果您希望线完全连接，那么只需在抓取后向值中添加几个额外的像素即可
var tocHeight = $('a.toc-link').height() + 6;

我已经联系了TOCBOT的作者，他善意地发现了我代码中的一个bug。此错误与问题1有关
我需要在上面的代码中包括“toc”类，而不仅仅是“jstoc”类
   <nav class="js-toc toc"  sticky-top py-5></nav>

我感谢你为回答这个问题所付出的努力。你的回答反映出你有很强的JS背景。我还在学习基础知识！再次感谢。
body a.toc-link.clicked {
  color:red;
}

var tocHeight = $('a.toc-link').height() + 6;

   <nav class="js-toc toc"  sticky-top py-5></nav>

.toc>.toc-list li{
    list-style:decimal-leading-zero;
}