javascript - 如何使用按钮在 div 之间切换？

Question

我一直在开发我的第一个实验性网站，首页上有一个图像幻灯片 div 部分。我在右上角有一个用于登录的按钮。当用户单击登录按钮时，id 会隐藏图像幻灯片并在其位置显示登录表单。

我希望点击这个按钮。 (按钮的样式位于连接到 div 的 css 文件中。)

<a href="javascript:void(0);" id="signin">
  <div id="logbutton">
    Sign in
  </div>
</a>

我想在这两个之间切换

<div id="pic">
  <img src="img/header.jpg" id="imgBanner" />
</div>

<div id="logbox" style="display: none;">
  Login form
</div>

单击按钮时，该 javascript 函数将会/应该运行

$(function(){
  $('#signin').click(function(){
    $('#pic').toggle();
    $('#logbox').toggle(); 
  });
});

我感觉我错过了一些东西，或者我可能完全错过了使用这段代码。

Answer 1

第一: 我会这样做:

<script>
 var showLoginForm = false;
 $(function(){
   $('#signin').click(function(){
    $('#pic,#logbox').hide();
    $('#pic').toggle(!showLoginForm);
    $('#logbox').toggle(showLoginForm);
  });
 });
</script>

第二: 将 block 元素(div、table 等)放入内联元素(a、span 等)内是一种不好的 HTML 做法。 根据您的需要删除 和 样式，下面是一个示例:

<style>
 .linkButton {
  display: inline-block;
  height: 20px;
  padding: 5px;
 }
</style>
<a href="javascript:void(0);" id="signin" class="linkButton">Sign in</a>