简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > HTML-Tutorial > Hauptteil

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

WBOY
Freigeben： 2016-06-24 12:06:28
Original
2120 Leute haben es durchsucht

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
    Verwandte Etiketten：
    login and signup 注册和登录tab页面
    Quelle：php.cn
    Vorheriger Artikel：CSS实现菜单栏制作，鼠标经过变色_html/css_WEB-ITnose Nächster Artikel：妙味云课堂之css：表格和表单_html/css_WEB-ITnose
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Neueste Artikel des Autors
    Aktuelle Ausgaben
    function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...
    Aus 2024-04-29 11:01:01
    0
    2
    1643
    So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?
    Aus 2024-04-23 00:22:19
    0
    10
    1799
    Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.
    Aus 2024-04-19 15:37:47
    0
    1
    1533
    Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...
    Aus 2024-04-18 23:52:34
    0
    1
    1440
    Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen
    Aus 2024-04-16 10:10:18
    0
    0
    1489
    verwandte Themen
    Mehr>
    Beliebte Empfehlungen
    Beliebte Tutorials
    Mehr>
    Verwandte Tutorials
    Beliebte Empfehlungen
    Aktuelle Kurse
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage
    Über uns Haftungsausschluss Sitemap
    Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！