1

我一直在开发我的第一个实验性网站，首页上有一个图像幻灯片放映 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(); 
  });
});

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

4

1 回答 1

1

首先：我会这样做：

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

第二：将块元素（div、table 等）放在内联元素（a、span 等）中是一种糟糕的 HTML 做法。根据您的需要删除 and 样式，这是一个示例：

<style>
 .linkButton {
  display: inline-block;
  height: 20px;
  padding: 5px;
 }
</style>
<a href="javascript:void(0);" id="signin" class="linkButton">Sign in</a>
于 2012-09-08T17:59:50.520 回答