1

私は最初の実験的な Web サイトに取り組んでおり、フロント ページには画像スライド ショーの div セクションがあります。右上隅にサインインするためのボタンがあります。ユーザーがサインイン ボタンをクリックすると、画像のスライド ショーが非表示になり、その場所にログイン フォームが表示されるようになります。

このボタンをクリックしていただければ幸いです。(ボタンのスタイリングは、div に接続された css ファイルにあります。)

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

この2つを切り替えたい

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

2番目：インライン要素（a、spanなど）内にブロック要素（div、tableなど）を配置するのは悪いHTMLプラクティスです。必要に応じてとスタイルを削除します。例を次に示します。

<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 に答える