title: Changing a links href and text on click
body: <p>So I have three buttons each display their own content when clicked. But what I want to happen is the active links text to change to about us and the href to change too. My problem is that I can get the text to change but it doesn't change back when I click another link, and I don't know how to make this happen. Another problem is that as soon as I click it the first time href changes and I need it to change when it is clicked the second time not the first time. Hopefully all that makes sense.</p>
  
  <p><a href="https://codepen.io/Reece_Dev/pen/gWdEoJ" rel="nofollow noreferrer">https://codepen.io/Reece_Dev/pen/gWdEoJ</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function()
  {
      $('.link').on('click', function()
      {
          $('.pageContainer').addClass('hide');
          $('#'+ $(this).data('target')).removeClass('hide');
          
          if($(this).on('click')){
              $(this).attr("href", "https://www.google.com");
              $(this).text('about');
            }
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>nav{
    width: 100%;
    text-align: center;
  }
  
  nav ul{
    list-style-type: none;
  }
  
  nav ul li{
    display: inline-block;
  }
  
  nav ul li a{
    font-size: 40px;
    margin: 0 10px;
  }
  
  p{
    font-size: 30px;
    font-weight: bold;
  }
  
  div{
    width: 100%; 
    text-align: center;
  }
  
  .hide{
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>   &lt;nav&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a id="link_one" class="link" data-target="accreditations" href="#"&gt;link 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a id="link_two" href="#" class="link" data-target="our_prods"&gt;link 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a id="link_three" href="#" class="link" data-target="why_us"&gt;link 3&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
      
      &lt;div class="pageContainer" id="about_us"&gt;
        &lt;p&gt;About Us Page - to be displayed by default&lt;/p&gt;
      &lt;/div&gt;
      
      &lt;div class="pageContainer" id="accreditations"&gt;
        &lt;p&gt;Accreditations Page Content - Link 1&lt;/p&gt;
      &lt;/div&gt;
      
      &lt;div class="pageContainer" id="our_prods"&gt;
        &lt;p&gt;Our products - Link 2&lt;/p&gt;
      &lt;/div&gt;
      
      &lt;div class="pageContainer" id="why_us"&gt;
        &lt;p&gt;Why us content - link 3&lt;/p&gt;
      &lt;/div&gt;
      
      &lt;script
        src="https://code.jquery.com/jquery-3.2.1.min.js"
        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
        crossorigin="anonymous"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>