更改文本部分的超链接颜色

Question

我的作品通过ID链接到上面的

hyperlinks

。 现在我希望当我位于文本部分内时，我的文本所连接的超链接将变成红色。 怎么办？

#personal-loan ul li a:active {
  color: #61B576;
}

<section id="service-details">
  <div id="personal-loan">
    <h3>Personal Loans</h3>
    <ul>
      <li><a href="#how-payday">How a Payday Loan Online Works</a></li>
      <li><a href="#loan-application">Payday Loan Application Processing</a></li>
      <li><a href="#about-loan">What You Know About Loans</a></li>
      <li><a href="#service-render">What Services We Render</a></li>
    </ul>
  </div>

  <div id="personal-loan-text">
    <div id="how-payday" class="personal-loan-text-child-one">
      <h1>How a Payday Loan Online Works</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Egestas at eu purus eleme nergtum. Nisl turpis consectetur amet, nam arc fermentum quam odio eros sem. Morbi mattis eu dictum malesuada. Tellus in.</p>
    </div>

    <div id="loan-application" class="personal-loan-text-child-two">
      <h2>Payday Loan Application Processing</h2>
      <ul>
        <li>Interest may vary, be fixed, or mixed, will on the lender’s and characteristics</li>
        <li>Depending on the granting institution and the amount of the loan, goods</li>
        <li>The loan can be granted to anyone, as long as they make the loan application</li>
      </ul>
    </div>

    <hr>

    <div id="about-loan" class="personal-loan-text-child-three">
      <h3>What You Know About Loans</h3>
      <iframe src="https://www.youtube.com/embed/jgAsPXRhTLQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
    </div>

    <hr>

    <div id="service-render" class="personal-loan-text-child-four">
      <h4>What Services We Render</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ultrices accumsan ultricies morbi purus dui pharetra, diam congue. Facilisi sapien eros, a sagittis, at quam dolor elit. Malesuada </p>
    </div>
  </div>
</section>

我希望当有人滚动到文本时，连接到该文本的超链接的颜色将会改变。

Answer 1

您可以使用javascript通过循环遍历ul标签中的所有链接来检查哪个链接被点击。 您可以使用 a.active 代替 a:active （点击后 JavaScript 将添加活动类） 在每个锚标记上，您需要添加代码中提到的“链接”类。 他们可能有其他解决方案，但当时这是我想出的。

// selecting all links with query selector
let links = document.querySelectorAll(".links")

// looping through all link to check for click event
links.forEach(link => {
  link.addEventListener("click", () => {
      remove() // to remove active class from previous click
      link.classList.add("active");
  })
});

function remove () {
  links.forEach(link => {
      link.classList.remove("active");
  });
}

#personal-loan ul li a.active {
        color: #61B576;
      }
      
/* checking for a.active class in anchor link */

    <section id="service-details">
        <div id="personal-loan">
          <h3>Personal Loans</h3>
          <ul>
           <!-- adding links class to all the link you want to change color after click -->
            <li><a class="links" href="#how-payday">How a Payday Loan Online Works</a></li>
            <li><a class="links" href="#loan-application">Payday Loan Application Processing</a></li>
            <li><a class="links" href="#about-loan">What You Know About Loans</a></li>
            <li><a class="links" href="#service-render">What Services We Render</a></li>
          </ul>
        </div>
  
        <div id="personal-loan-text">
          <div id="how-payday" class="personal-loan-text-child-one">
            <h1>How a Payday Loan Online Works</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Egestas at eu purus eleme nergtum. Nisl turpis consectetur amet, nam arc fermentum quam odio eros sem. Morbi mattis eu dictum malesuada. Tellus in.</p>
          </div>
  
          <div id="loan-application" class="personal-loan-text-child-two">
            <h2>Payday Loan Application Processing</h2>
            <ul>
              <li>Interest may vary, be fixed, or mixed, will on the lender’s and characteristics</li>
              <li>Depending on the granting institution and the amount of the loan, goods</li>
              <li>The loan can be granted to anyone, as long as they make the loan application</li>
            </ul>
          </div>
  
          <hr>
  
          <div id="about-loan" class="personal-loan-text-child-three">
            <h3>What You Know About Loans</h3>
            <iframe src="https://www.youtube.com/embed/jgAsPXRhTLQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
          </div>
  
          <hr>
  
          <div id="service-render" class="personal-loan-text-child-four">
            <h4>What Services We Render</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ultrices accumsan ultricies morbi purus dui pharetra, diam congue. Facilisi sapien eros, a sagittis, at quam dolor elit. Malesuada </p>
          </div>
        </div>
      </section>

Answer 2

您的意思是当滚动到包含超链接文本的部分时，文本将更改为您想要的样式？这听起来很 JavaScript xDD