Jquery, link to change blue, and then back to black when new link clicked

JavaScript
1

First off, I know my code isn’t properly formatted and I do apologize. So i am working on some jquery and I have 4 links in my side nav bar, each one toggles a different form. Basically i want to be able to have the links change to blue when they are clicked on, and when a new one is clicked, the original turns back to black, and the new one to blue. Here is my html

 <div class="row">
            <div class="col-md-4">
              <h3 class="title">Calculators</h3> 
              <ul class="calc-nav">
                <li class="calc">
                <a class="link" data-id="form1">Lifetime Value Calculator</a>
                </li> 
                <li class="calc">
                <a class="link" data-id="form2">Breakeven Analysis</a>
                </li>
                <li class="calc">
                <a class="link" data-id="form3">Total Audience Calculator</a>
                </li>
                <li class="calc">
                <a class="link" data-id="form4">Number of Offers Calculator</a>
                </li>
                  </ul>
              </div>
         
          <div class="col-md-8 forms">
            <form id="form1">
            <h3>Lifetime Value Calculator</h3>
            <p>Calculator which determines the lifetime value of a customer</p>
          The average dollar amount of a client's reorder: <br>
              <input value="" type="number"  class='num'/><br/>
          How many times per year does an average client buy from you? <br>
              <input value=""  type="number" class='num'/><br/>
          On average, how many years does a client continue doing business with you? <br> 
              <input value=""  type="number" class='num'/><br/>
          Customer Lifetime Value: <br>
              <input value=""  type="number" class='tot'/>
           </form>

           <form id="form2">
           <h3>Breakeven Analysis Calculator</h3>
            <p>Calculator which determines your breakeven analysis</p>
          Customer Lifetime Value: <br>
            <input value="" type="number"  class='field1'/><br/>
          Gross Margin Percentage: <br>
            <input value=""  type="number" class='field2' /><br/>
          Marin Per Customer: <br> 
            <input value=""  type="number" class='field3'/><br/>
          Monthly Advertising Spend: <br> 
            <input value=""  type="number" class='field4'/><br/>
          Number of Customers to breakeven: <br>
            <input value=""  type="number" class='field5'/><br/>
           </form>
        
           <form id="form3">
           <h3>Total Audience Calculator</h3>
            <p>Calculator which determines your total audience</p>
          Number of residence mailed: <br>
            <input value="" type="number"  class='number1'/><br/>
          Average Number of people per residence: <br>
            <input value=""  type="number" class='number2' /><br/>
          Total potential audience <br> 
            <input value=""  type="number" class='number3'/><br/>
          </form>

           <form id="form4">
           <h3>Number of Offers</h3>
            <p>Calculator which determines your total number of offers</p>
          Number of residence mailed: <br>
            <input value="" type="number"  class='input1'/><br/>
          Number of Coupons: <br>
          <input value=""  type="number" class='input2' /><br/>
          Total number of coupons <br> 
            <input value=""  type="number" class='input3'/><br/>
          </form>
        </div>
      </div>

The jquery I do have loads the first form automatically (which i want). i know you can add and remove classes, but not sure how to turn the class back off after you click to a new link

$('.calc-nav li a').on('click', function() {
        toggleForms($(this).data('id'));
                
    });
2

was able to solve this using the siblings() method

  $("li").click(function() {
        $(this).siblings().find("a").removeClass("focus");
        $(this).find("a").addClass("focus")
    })

So now when I click my link, it turns blue, and when I click another one it also turns blue, but the first one goes back to original colour

3

Well, first of all, links (like the following) should be fixed and a elements should contain a href attribute.

Basically, it’s possible to change the color of a clicked link with CSS only, by using the ::active selector like so:

a:active {
  color: blue;
}

When you click on the link, it turns blue, then goes back to its original color right after that.

If the effect you are looking for is to keep it blue for a long time [as you mentioned in your second comment,

It’s also possible to do that in only one line by simply using jQuery toggleClass() Method.

Good Luck & Happy Coding.

2 Likes