Question 223734 in Html Question posted in
Some basic documentation can be found here.

Html – Changin hyperlink color with text section

My writings are linked to the hyperlinks above via ID.
Now I want that when I am inside a section of text the hyperlink that my text is connected to will turn red in color.
how to do it?

#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>

I want when someone scrolls to a text the color of the hyperlink connected to that text will change.

Tags:

2

Answers


  1. 0

    You can use javascript to check which link is clicked by looping over all the links in ul tag.
    Instead of using a:active you can use a.active (active class will be added by javascript after click)
    on each anchor tag you need to add "links" class as mentioned in code.
    Their might be other solutions but at the time this is what I’ve come up with.

    // 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>
    Login or Signup to reply.
  2. 0

    You mean when scroll to the section that contain hyperlink text, the text will change to the style that you want? That’s sounds very JavaScript xDD

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search