如何使用JavaScript修改内联toc元素的类？

Question

问题

嗨，我正在创建一个简单的导航站点，想知道如何更改/向内联toc的li元素之一添加类，在右侧使用css对其进行样式设置

到目前为止，我的页面。

https://startech-enterprises.github.io/docs/data-integration-and-etl/branches-and-loops-local.html

我想要实现的页面行为：https://docs.microsoft.com/en-us/dotnet/csharp/tutorials/intro-to-csharp/branches-and-loops-local

（（如果您上下滚动主页，您将看到右侧toc元素的样式更改）

在这里可以看到相同的行为：https://startech-enterprises.github.io/minimal-mistakes/docs/quick-start-guide/（请参见上下滚动页面的右侧toc更改）

我已经尝试研究这些页面后面的JavaScript，但是很难理解它，并且脚本看起来过于复杂。

有什么想法吗？

谢谢，

Sachin

已使用代码

到目前为止我拥有的CSS：

.doc-outline h3 {
  margin: 0;
  margin-top: 16px;
  font-size: 1rem;
}

.doc-outline ul {
  margin: 10px 0 0;
  list-style-type: none;
}

.doc-outline ul li {
  list-style: none;
}

.doc-outline ul li a {
  text-decoration: none;
}

.doc-outline ul li a:hover {
  text-decoration: underline;
}


.doc-outline li {
  border-left: 3px solid transparent;
  padding: 2px 0;
  padding-left: 4px;
  margin: 4px 0;
  line-height: 1.3;
  font-size: 0.825rem;
}

.doc-outline li.selected {
  font-weight: 600;
  border-color: #0065b3;
}

.doc-outline a:visited {
  color: #0065b3;
}

HTML的相关部分

   <div class="primary-holder column is-two-thirds-tablet is-three-quarters-desktop">
      <div class="columns has-large-gaps is-gapless-mobile">

        <!-- MAIN CONTENT GOES HERE --!>
        <div id="main-column" class="column is-full is-four-fifths-desktop">
          <main id="main" class ="content" lang="eng-us">
            <h1 id="learn-conditional-logic-with-branch-and-loop-statements">Learn conditional logic with branch and loop statements</h1>.....etc.
          </main>   
        </div>

       <!-- RHS TOC GOES HERE --!>
       <div class="right-sidebar column is-one-quarter is-one-fifth-desktop is-hidden-mobile is-hidden-tablet-only">
        <nav class="doc-outline is-fixed is-vertically-scrollable", id="affixed-right-sidebar">
        <nav id="side-doc-outline">
         <ul class="section-nav">
           <li class="toc-entry toc-h2"><a href="#make-decisions-using-the-if-statement">Make decisions using the if statement</a></li>
           <li class="toc-entry toc-h2"><a href="#make-if-and-else-work-together">Make if and else work together</a></li>
           <li class="toc-entry toc-h2"><a href="#use-loops-to-repeat-operations">Use loops to repeat operations</a></li>
           <li class="toc-entry toc-h2"><a href="#work-with-the-for-loop">Work with the for loop</a></li>
           <li class="toc-entry toc-h2"><a href="#created-nested-loops">Created nested loops</a>
           <ul>
            <li class="toc-entry toc-h3"><a href="#test">Test</a></li>
          </ul>
          </li>
          <li class="toc-entry toc-h2"><a href="#combine-branches-and-loops">Combine branches and loops</a></li>
          </ul>
       </nav>
      </nav>
     </div>

    </div>
   </div>   

JavaScript

Not sure???

Answer 1

据我所知，您不想给它一个样式，只是添加一个类？如果您想直接给li添加一些样式，例如您可以这样做

document.getElementsByTagName("li").addEventListener("click",()=>{
 this.style = "color:red";
})

但是我想您想添加已经准备好的类，那么您需要ClasList

document.getElementById("myDIV").classList.add("mystyle");

添加

document.getElementById("myDIV").classList.remove("mystyle");

删除

document.getElementById("myDIV").classList.toggle("mystyle");

toggles