login and signup 注册和登录tab页面

login and signup 注册和登录tab页面

演示

 

JavaScript Code

1. <script type="application/javascript">  
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. </script>  

 

XML/HTML Code

1. <div style="margin:40px">  
2. <div id="container">  
3. <div id="tabbox">  
4. <a href="#" id="signup" class="tab signup">Signup</a>  
5. <a href="#" id="login" class="tab select">Login</a>  
6. </div>  
7. <div id="panel">  
8. <div id="loginbox"><h1>Login Form</h1></div>  
9. <div id="signupbox"><h1>Singup Form</h1></div>  
10. </div>  
11.   
12. </div>  
13. </div>  

 

CSS Code

1. <style>  
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. </style>  

 

原文地址: http://www.freejs.net/article_biaodan_142.html