It is necessary to make a simulated click when clicking on links, so that supposedly buttons are pressed. Individually, each line in jquery works. Why not working together?

// Go to tab modal $(".login-btn").click(function(){ $('.login-btn-tab').addClass('active'); $('.login-btn-tab').trigger('click'); }); $(".sign_up-btn").click(function(){ $('.create-btn').toggleClass('active'); $('.create-btn').trigger('click'); }); // tabs login popup function tab_login(evt, tab) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(tab).style.display = "block"; evt.currentTarget.className += " active"; } 
 .tabcontent{ display:none } button.active{ background:red; } *{ outline:none } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <ul> <li class="login-btn"><a href=#>login</a></li> <li class="sign_up-btn"><a href=#>sign-up</a></li> </ul> <div id="login"> <div class="tab"> <button class="tablinks login-btn-tab" onclick="tab_login(event, 'login-popup')">Login</button> <button class="tablinks create-btn" onclick="tab_login(event, 'create-popup')">Create account</button> </div> <div id="login-popup" class="tabcontent"> Login </div> <div id="create-popup" class="tabcontent invited"> Create </div> </div>

    0