検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >ログインとサインアップ 登録とログイン タブ page_html/css_WEB-ITnose

ログインとサインアップ 登録とログイン タブ page_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
2016-06-24 12:06:282247ブラウズ

login and signup 注册和登录tab页面

演示


 

JavaScript Code

  1. <script> </script>
  2. $(document).ready(function()  
  3. {  
  4.       
  5. $(".tab").click(function()  
  6. {  
  7. var X=$(this).attr('id');  
  8.    
  9. if(X=='signup')  
  10. {  
  11. $("#login").removeClass('select');  
  12. $("#signup").addClass('select');  
  13. $("#loginbox").slideUp();  
  14. $("#signupbox").slideDown();  
  15. }  
  16. else  
  17. {  
  18. $("#signup").removeClass('select');  
  19. $("#login").addClass('select');  
  20. $("#signupbox").slideUp();  
  21. $("#loginbox").slideDown();  
  22. }  
  23.    
  24. });  
  25.   
  26. });  
  27.   

 

XML/HTML Code

  1.   
  2.   
  3.   
  4. Signup  
  5. Login  
  
  •   

  • Login Form

      

  • Singup Form

      
    •   
  •   
    •   
    •   

    CSS コード

    2. body
    3. {
    4. font-family:Arial、Helvetica、sans-serif;  
    5. font-size:12px; 背景色:#333;   
    6. }
    7. #container
    8. {
    9. 幅:350px
    10. }
    11. #tabbox
    12. {
    13. 高さ:40px
    14. }
    15. #panel
    16. {
    17. background-color:#aaa;  
    18. 高さ:300ピクセル;  
    20. }
    21. .tab
    22. {
    23. background: #ccc;  
    24. 表示: ブロック;  
    25. 高さ: 40ピクセル;  
    26. line-height: 40px;  
    27. text-align: 中央;  
    28. 幅: 80ピクセル;  
    29. float: そうそう;  
    30. font-weight: 太字;  
    31. -webkit-border-top-left-radius: 4px;  
    32. -webkit-border-top-rightright-radius: 4px;  
    33. -moz-border-radius: 4px 4px 0px 0px;  
    34. }
    35. a
    36. {
    37. color: #000;  
    38. マージン: 0;  
    39. パディング: 0;  
    40. テキスト装飾: なし。  
    41. }
    42. .signup
    43. {
    44. margin-left:8px;  
    46. }
    47. .select
    48. {
    49. background-color:#aaa;  
    51. }
    52. #loginbox
    53. {
    54. 高さ:300px;  
    55. パディング:10px;  
    56. }
    57. #signupbox
    58. {
    59. 高さ:300px;  
    60. パディング:10px;  
    61. 表示: なし。  
    62. }
    65.   


    原文地址: http://www.freejs.net/article_biaodan_142.html
    声明：
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    前の記事：CSSでメニューバー制作を実装、マウスで変化 color_html/css_WEB-ITnose次の記事：CSSでメニューバー制作を実装、マウスで変化 color_html/css_WEB-ITnose

    関連記事

    続きを見る