In HTML, wie kann ich eine Klasse mit jQuery aktiv und aktiv machen?

Question

schrieb ich die folgende Funktion in jQuery diese Operation auszuführen:

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

Und Code meines zwei Klassen in HTML ist:

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

Ich brauche Registerkarte Inhalt anmelden, um anzuzeigen, wenn Der Nutzer klickt auf "Anmelden". Wenn der Nutzer auf "Login" klickt, wird der Inhalt des Anmelde-Tabs angezeigt. Aber es funktioniert nicht, Bitte geben Sie eine Lösung für mich, ich bin neu in jQuery ....

Answer 1

Ehrlich gesagt, wenn es mich wäre, würde ich nur statisch Aktionen zu beiden h3 Links zuweisen. Es erleichtert mir, genau zu wissen, was vor sich geht.

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>

verließ ich die .active Klasse Sachen aus, weil es nicht klar, was es ohne die CSS an dieser Stelle tut. Sobald wir sehen können, was es tun soll, können wir die Klasse aus den notwendigen Elementen hinzufügen/entfernen.