Question

我想隐藏div块并显示另一个最初隐藏的div块（display：none）。我这样做是通过触发onclick一个jQuery函数来添加或删除一个具有CSS属性'display：none'的类。

它有效...但只是一秒左右。一个div隐藏，隐藏的一个出现，但只有一秒钟，然后它返回到原始状态。在再次触发该功能之前，如何使其永久化？

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=''告诉点击时加载网址''的链接。将其设置为href="#"即可。您可能希望在点击处理程序中使用e.preventDefault()，以防止哈希显示在地址栏中。

＆＃13;

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

＆＃13;

.notin {
   display: none;
}

＆＃13;

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

＆＃13;

Answer 2

不要重复准备好文档并完善其工作。href必须具有价值。

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

用addClass removeClass显示hide div，但只是一秒钟

2 个答案: