首页 > web前端 > html教程 > login and signup 注册和登录tab页面_html/css_WEB-ITnose

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

WBOY

发布： 2016-06-24 12:06:28

原创

2160 人浏览过

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.