首页>>表单>>login and signup 注册和登录tab页面(2013-12-04)

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