Show hide divs with addClass removeClass works, but just for a second

Question

I want to hide a div block and show another div block that is originally hidden (display: none). I do it by triggering onclick a jQuery function that adds or remove a class which has the CSS property 'display: none'.

It works... but just for a second or so. One div hides and the hidden one appears, but only for a second, then it returns to the original situation. How can I make it permanent until the function is triggered again?

HTML

<div class="div1">
    <a href=""> Log in</a>
</div>`enter code here`
<div class="div2 notin">
    <a href=""> Log out</a>
</div>

CSS

.notin {
   display: none;
}

jQuery

$(document).ready(() => {
  $(".div1").on("click", "a", () => {
    $(".div1").addClass("notin");
    $(".div2").removeClass("notin");
  });
});

$(document).ready(() => {
  $(".div2").on("click", "a", () => {
    $(".div2").addClass("notin");
    $(".div1`enter code here`").removeClass("notin");
  });
});

Answer 1

href='' is telling the link to load the url '' when clicked. Set it to href="#" and it works. You may want to use e.preventDefault() in your click handlers to prevent the hash from appearing in the address bar.

$(".div2").on("click", "a", (e) => {
    e.preventDefault();
    $(".div2").addClass("notin");
    $(".div1").removeClass("notin");
  });
   $(".div1").on("click", "a", (e) => {
    e.preventDefault();
    $(".div1").addClass("notin");
    $(".div2").removeClass("notin");
  });

.notin {
   display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">
    <a href="#"> Log in</a>
</div>
<div class="div2 notin">
    <a href="#"> Log out</a>
</div>

Answer 2

Don't repeat document ready and its work perfect.And href must have value.

$(document).ready(() => {
  $(".div1").on("click", "a", () => {
    $(".div1").addClass("notin");
    $(".div2").removeClass("notin");
  });
  $(".div2").on("click", "a", () => {
    $(".div2").addClass("notin");
    $(".div1").removeClass("notin");
  });
});

.notin {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">
  <a href="javascript:void(0)"> Log in</a>
</div>
<div class="div2 notin">
  <a href="javascript:void(0)"> Log out</a>
</div>