显示具有addClass removeClass的隐藏div的方法，但仅需一秒钟 [英] Show hide divs with addClass removeClass works, but just for a second

问题描述

我想隐藏一个div块并显示另一个最初隐藏的div块(显示:无).我通过触发onclick jQuery函数来实现，该函数添加或删除了具有CSS属性"display:none"的类.

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

它可以工作...但是仅需一秒钟左右.一个div隐藏，然后隐藏的一个出现，但仅显示一秒钟，然后返回到原始状态.如何使其永久保存，直到再次触发该功能?

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

推荐答案

href=''告诉链接，单击该链接时将加载URL ''.将其设置为href="#"即可.您可能要在点击处理程序中使用e.preventDefault()，以防止哈希显示在地址栏中.

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>

这篇关于显示具有addClass removeClass的隐藏div的方法，但仅需一秒钟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！