In HTML how can I make a class active and active using jQuery?

Question

I wrote the following function in jQuery to perform this operation:

jQuery(document).ready(function($) {
    tab = $('.tabs h3 a');
    tab.on('click', function(event) {
        event.preventDefault();
        tab.removeClass('active');
        $(this).addClass('active');

        tab_content = $(this).attr('href');
    //  $('div[id$="tab-content"]').removeClass('active');
        $('div[id$="tab-content"]').removeClass('active');
        $(tab_content).addClass('active');
    });
});

And my two classes code in HTML are:

< div class="form-wrap">

    <div class="tabs">
        <h3 class="signup-tab"><a href="#signup-tab-content" onclick="test()">Sign Up</a></h3>
        <h3 class="login-tab"><a  class="active" href="#login-tab-content">Login</a></h3>
    </div>

    <div class="tabs-content">

        <div id="signup-tab-content">
            <form class="signup-form" action="" method="post">
                <input type="email" class="input" placeholder="Enter Email" required>
                <input type="text" class="input" placeholder="Enter Username" required>
                <input type="password" class="input" placeholder="Enter Password" required>
                <input type="submit" class="button" value="Sign Up">
            </form>
        </div>

        <div id="login-tab-content"  class="active">
            <form class="login-form" action="" method="post">
                <input type="text" class="input" placeholder="Enter Email or Username" required>
                <input type="password" class="input" placeholder="Enter Password" required>
                <input type="submit" class="button" value="Login">
            </form>
            <div class="bottom-text">
                <p><a href="#">Forget your password?</a></p>
            </div>
        </div>

    </div>

I need to display sign up tab content when user clicks on Sign up, and when user click on login, it will show login tab content. But it is not working, please give a solution to me, I am new to jQuery....

Answer 1

Honestly, if it were me, I would just statically assign actions to both h3 links. It makes it easier for me to know exactly what is going on.

jQuery(document).ready(function($) {

  // could probably create an id instead of a class too for these
  $('.signup-tab').click(function() {
    $('#signup-tab-content').show();
    $('#login-tab-content').hide();
  });
  $('.login-tab').click(function() {
    $('#signup-tab-content').hide();
    $('#login-tab-content').show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="form-wrap">
  <div class="tabs">
    <h3 class="signup-tab"><a href="#signup-tab-content">Sign Up</a></h3>
    <h3 class="login-tab"><a class="active" href="#login-tab-content">Login</a></h3>
  </div>

  <div class="tabs-content">

    <div id="signup-tab-content" style="display:none">
      <form class="signup-form" action="" method="post">
        <input type="email" class="input" placeholder="Enter Email" required>
        <input type="text" class="input" placeholder="Enter Username" required>
        <input type="password" class="input" placeholder="Enter Password" required>
        <input type="submit" class="button" value="Sign Up">
      </form>
    </div>

    <div id="login-tab-content" class="active">
      <form class="login-form" action="" method="post">
        <input type="text" class="input" placeholder="Enter Email or Username" required>
        <input type="password" class="input" placeholder="Enter Password" required>
        <input type="submit" class="button" value="Login">
      </form>
      <div class="bottom-text">
        <p><a href="#">Forget your password?</a></p>
      </div>
    </div>
  </div>
</div>

I left out the .active class stuff because it's not clear what it is doing at this point without the css. Once we can see what it is supposed to be doing we can add/remove the class from the necessary elements.