찾다

집 >웹 프론트엔드 >HTML 튜토리얼 >login and signup 注册和登录tab页面_html/css_WEB-ITnose

login and signup 注册和登录tab页面_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-24 12:06:282165검색

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 Code

    2. body  
    3. {  
    4.     font-family:Arial, Helvetica, sans-serif;  
    5.     font-size:12px; background-color:#333;   
    6. }  
    7. #container  
    8. {  
    9.     width:350px  
    10. }  
    11. #tabbox  
    12. {  
    13.     height:40px  
    14. }  
    15. #panel  
    16. {  
    17.     background-color:#aaa;  
    18.     height:300px;  
    19.       
    20. }  
    21. .tab  
    22. {  
    23. background: #ccc;  
    24. display: block;  
    25. height: 40px;  
    26. line-height: 40px;  
    27. text-align: center;  
    28. width: 80px;  
    29. float: rightright;  
    30. font-weight: bold;  
    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. margin: 0;  
    39. padding: 0;  
    40. text-decoration: none;  
    41. }  
    42. .signup  
    43. {  
    44.     margin-left:8px;  
    45.       
    46. }  
    47. .select  
    48. {  
    49.     background-color:#aaa;  
    50.       
    51. }  
    52. #loginbox  
    53. {  
    54.     height:300px;  
    55.     padding:10px;  
    56. }  
    57. #signupbox  
    58. {  
    59.     height:300px;  
    60.     padding:10px;  
    61.     display:none;  
    62. }  
    63.   
    64.   
    65.   

     


    原文地址: http://www.freejs.net/article_biaodan_142.html
    성명：
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    이전 기사：CSS实现菜单栏制作，鼠标经过变色_html/css_WEB-ITnose다음 기사：妙味云课堂之css：表格和表单_html/css_WEB-ITnose

    관련 기사

    더보기