Changing a links href and text on click

Question

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.

https://codepen.io/Reece_Dev/pen/gWdEoJ

 $(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'); } }); }); 

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

  <nav> <ul> <li><a id="link_one" class="link" data-target="accreditations" href="#">link 1</a></li> <li><a id="link_two" href="#" class="link" data-target="our_prods">link 2</a></li> <li><a id="link_three" href="#" class="link" data-target="why_us">link 3</a></li> </ul> </nav> <div class="pageContainer" id="about_us"> <p>About Us Page - to be displayed by default</p> </div> <div class="pageContainer" id="accreditations"> <p>Accreditations Page Content - Link 1</p> </div> <div class="pageContainer" id="our_prods"> <p>Our products - Link 2</p> </div> <div class="pageContainer" id="why_us"> <p>Why us content - link 3</p> </div> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 

Answer 1

You can try the following - I have commented js to show what I am doing. Only other changes are to links - use target ids as href and add hide class to page containers you do not want to display by default

 $(document).ready(function() { var links = $('.link'), containers = $('.pageContainer'); // cache these for better performance links.on('click', function(e) { // pass event into function var link = $(this); e.preventDefault(); // add this to stop the default action of the link containers.addClass('hide'); $(link.attr('href')).removeClass('hide'); // use the href so it is more accessible - ie link will work without js if (link.attr('href').substr(1) === link.data('target')) { // only do this if original href links.not(link).text(function() { return $(this).data('text'); // reset text }).attr('href', function() { return '#' + $(this).data('target'); // reset href }); link.attr("href", "#about_us").text('about'); // not sure how you want to set the text and link for this // maybe use more data attributes so it can be different per link } else { // reset link if it was about that was clicked link.text(link.data('text')).attr('href', '#' + link.data('target')); // reset href and text } }); }); 

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

 <nav> <ul> <li><a id="link_one" href="#accreditations" class="link" data-target="accreditations" data-text="link 1">link 1</a></li> <li><a id="link_two" href="#our_prods" class="link" data-target="our_prods" data-text="link 2">link 2</a></li> <li><a id="link_three" href="#why_us" class="link" data-target="why_us" data-text="link 3">link 3</a></li> </ul> </nav> <div class="pageContainer" id="about_us"> <p>About Us Page - to be displayed by default</p> </div> <div class="pageContainer hide" id="accreditations"> <p>Accreditations Page Content - Link 1</p> </div> <div class="pageContainer hide" id="our_prods"> <p>Our products - Link 2</p> </div> <div class="pageContainer hide" id="why_us"> <p>Why us content - link 3</p> </div> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 

Answer 2

Save the prev text inside the link in a data attribute.Then on click reset all div with initial text and then set the new text to the target div

For activaitng link on second click add a new class to the div on first click.Then change the href if that class doesnot exists

A sample demo attached

 $(document).ready(function() { $('.link').on('click', function() { $('.link').each(function( ){ $(this).text($(this).data('inactive-text')); }) $('.pageContainer').addClass('hide'); $('#'+ $(this).data('target')).removeClass('hide'); $(this).text( $(this).data('active-text') ); if($(this).hasClass("clicked")){ $(this).attr("href", "https://www.google.com"); } $(this).addClass("clicked") }); }); 

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

 <nav> <ul> <li><a id="link_one" class="link" data-target="accreditations" href="#" data-inactive-text="link 1" data-active-text="about" >link 1</a></li> <li><a id="link_two" href="#" class="link" data-target="our_prods" data-inactive-text="link 2" data-active-text="about" >link 2</a></li> <li><a id="link_three" href="#" class="link" data-target="why_us"data-inactive-text="link 3" data-active-text="about" >link 3</a></li> </ul> </nav> <div class="pageContainer" id="about_us"> <p>About Us Page - to be displayed by default</p> </div> <div class="pageContainer" id="accreditations"> <p>Accreditations Page Content - Link 1</p> </div> <div class="pageContainer" id="our_prods"> <p>Our products - Link 2</p> </div> <div class="pageContainer" id="why_us"> <p>Why us content - link 3</p> </div> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 

Answer 3

You can use e.preventDefault() to prevent the default behavior of the <a/> tag. that way it wont redirect to the link.
But you said you want it to redirect it on the second click, then you need a counter of some sort. one solution is to keep a data-attribute on the element itself and change it after the click.

for example:

 $(document).ready(function() { $('.link').on('click', function(e) { if($(this).attr('data-times-clicked') == '0'){ e.preventDefault(); $(this).attr('data-times-clicked', 1); $('.pageContainer').addClass('hide'); $('#'+ $(this).data('target')).removeClass('hide'); $(this).attr("href", "https://www.google.com"); $(this).text('about'); } }); }); 

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

 <nav> <ul> <li><a id="link_one" data-times-clicked="0" class="link" data-target="accreditations" href="#">link 1</a></li> <li><a id="link_two" data-times-clicked="0" href="#" class="link" data-target="our_prods">link 2</a></li> <li><a id="link_three" data-times-clicked="0" href="#" class="link" data-target="why_us">link 3</a></li> </ul> </nav> <div class="pageContainer" id="about_us"> <p>About Us Page - to be displayed by default</p> </div> <div class="pageContainer" id="accreditations"> <p>Accreditations Page Content - Link 1</p> </div> <div class="pageContainer" id="our_prods"> <p>Our products - Link 2</p> </div> <div class="pageContainer" id="why_us"> <p>Why us content - link 3</p> </div> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 

Answer 4

try Code : Jquery Changed

     $(document).ready(function()
        {
            $('.link').on('click', function() {
               $('.link').each(function( ){
                    $(this).text($(this).data('inactive-text'));
               })
                $('.pageContainer').addClass('hide');
                $('#'+ $(this).data('target')).removeClass('hide');

                $(this).text( $(this).data('active-text') );

            });
        });

Html change Code:

    <!-- language: lang-html -->

        <nav>
              <ul>
                <li><a id="link_one" class="link" data-target="accreditations" href="#" data-inactive-text="link 1" data-active-text="about" >link 1</a></li>
                <li><a id="link_two" href="#" class="link" data-target="our_prods" data-inactive-text="link 2" data-active-text="about" >link 2</a></li>
                <li><a id="link_three" href="#" class="link" data-target="why_us"data-inactive-text="link 3"  data-active-text="about" >link 3</a></li>
              </ul>
            </nav>