如何编辑起作用的功能的两个部分

Question

为什么工作仅触发jQuery函数的一部分？ 当我第一次单击时，我需要模仿第二个元素的单击。 只有addClass('active')或trigger('click')部分可以正常工作而没有第二行

$(".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;
}

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

必须工作两个部分的功能 当第一行或第二行被注释时，另一行起作用。 当两行都未注释时-仅触发