时间戳

首页 > 解决方案 > 我需要帮助如何将 CSS 中的链接样式类添加到页面上的链接

javascript - 我需要帮助如何将 CSS 中的链接样式类添加到页面上的链接

问题描述

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

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;
}

标签： javascriptcssfunction

解决方案

尝试使用以下代码更新您的 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>

推荐阅读