javascript - 我需要帮助如何将 linkstyles 类从 css 添加到页面上的链接

Question

我正在使用按钮。我必须有一个工作函数，它将 .linkStyles 类从我的 css 添加到页面上的所有链接。该功能的目标是让按钮在单击时对所有链接进行样式化。我将不胜感激!

var changeLinks = function () {
  document.getElementsByTagName("li").classList.toggle("linkStyles");
}

$("li").onclick = changeLinks;

这是 html 部分:

<ul>
  <li><a href="#"></a>Home</li>
  <li><a href="#"></a>About</li>
  <li><a href="#"></a>Contact</li>
  <li><a href="#"></a>FAQ</li>
</ul>

<section id="section2">
  <button type="button" id="links">Links Button</button>
</section>

这是css部分

.linkStyles{
    font-weight: bold;
    text-decoration: underline;
    text-decoration-style: dotted;
}

Answer 1

尝试使用以下代码更新您的 Javascipt

$('#links').click(function(){
        $("li").toggleClass("linkStyles");
  });

.linkStyles{
    font-weight: bold;
    text-decoration: underline;
    text-decoration-style: dotted;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><a href="#"></a>Home</li>
  <li><a href="#"></a>About</li>
  <li><a href="#"></a>Contact</li>
  <li><a href="#"></a>FAQ</li>
</ul> 

<section id="section2">
  <button type="button" id="links">Links Button</button>
</section>