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>

第二：这是一个糟糕的HTML实践，将块元素（div，table等）放在内联元素（a，span等）中。根据您的需要删除和样式，这是一个例子：

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

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

1 个答案: