首先，我们通过一个简单的代码来解释切换
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; border:0; } body{ text-align: center; } ul{ list-style: none; } a{ text-decoration: none; color: #ff6666; font-family: Arial; } .tab-container{ width: 398px; height: 200px; border:1px #ffcccc solid; margin: 0 auto; position: relative; overflow: hidden; } /*tab-head begin*/ .tab-head{ width: 400px; height:30px; left:0; background: #ffcccc; position: absolute; left:-1px;//这里设置-1是为了li的border与最外层的border重合 } .tab-head li{ float:left; height: 29px; line-height: 29px; width: 78px; overflow: hidden; padding: 0 1px; border-bottom: 1px solid #ffcccc; background: #ffeeee; } li.select{ background: #fff; padding: 0; border-left: 1px solid #ffcccc; border-right: 1px solid #ffcccc; border-bottom: 1px solid #fff; } /*tab-head end tab-panel begin*/ .tab-panel{ position: relative; width: 100%; height: 85%; top: 15%; -webkit-transition:all 0.01s linear;//切换过渡效果 } .tab-panel section{ position: absolute; display: inline-block; width: 100%; height: 100%; } #panel-1{ left: 0; } #panel-2{ left: 100%; } #panel-3{ left: 200%; } #panel-4{ left: 300%; } #panel-5{ left: 400%; } </style> </head> <body> <div class="tab-container"> <ul class="tab-head"> <li id="1" class="select" onmousedown="$(this)">Tab1</li> <li id="2" onmousedown="$(this)">Tab2</li> <li id="3" onmousedown="$(this)">Tab3</li> <li id="4" onmousedown="$(this)">Tab4</li> <li id="5" onmousedown="$(this)">Tab5</li> </ul> <div id="tab-panel" class="tab-panel"> <section id="panel-1"><p>这是panel-1</p></section> <section id="panel-2"><p>这是panel-2</p></section> <section id="panel-3"><p>这是panel-3</p></section> <section id="panel-4"><p>这是panel-4</p></section> <section id="panel-5"><p>这是panel-5</p></section> </div> </div> <script type="text/javascript"> function $(id){ var lis = document.getElementsByTagName(‘li‘); for (var i = 0; i < lis.length; i++) { lis[i].setAttribute(‘class‘,‘‘); }; id.setAttribute(‘class‘,‘select‘); var ele = document.getElementById(‘tab-panel‘); ele.style.left=-(id.id-1)+‘00%‘; } </script> </body> </html>
对应的图片为
在以上的代码中，主要的核心代码是：先弄出一个固定的外围div区域块，将div区域块分成两个部分，对于溢出的部分要进行隐藏用overflow:hidden，上部通过点击事件来控制下面的切换，对于form切换要注意他们之间的相对位置，如：left，通过js来改变left。
接下来进行输入表单的切换
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/imageChange.css" type="text/css" /> <script type="text/javascript" src="js/jquery.js"></script> <title>登入页面</title> </head> <style> *{ margin:0px; padding:0px; list-style: none; } #inputbox{ height:300px; width:300px; position: absolute; background-color: white; top:50%; left:50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.1); overflow:hidden; } .name{ width:300px; height: 45px; color:#0090CE; font-size: 30px; background-color: skyblue; text-align: center; padding-top: 5px; } .select{ width:300px; height:45px; left:-1px; right:-1px; } .select li{ float:left; height: 45px; width:98px; line-height: 45px; text-align: center; font-size:18px; background: black; color:white; border-right: 1px solid white; border-left: 1px solid white; background: rgba(0, 0, 0, 0.6); } li.uli{ background-color:white; color:black; padding: 0; border-left: 1px solid white; border-right: 1px solid white; } .getmeaadge{ position: relative; -webkit-transition:all 0.01s linear;<--切换过渡效果--> } .getmeaadge>form{ position: absolute; display:inline-block; } #student_form{ left: 0; } #teacher_form{ left: 100%; } #school_form{ left: 200%; } .input{ width:300px; height:30px; margin-top:10px; text-align: center; } #submit{ background-color:#0090CE; width:200px; height:30px; font-size:18px; color:white; border:0px; font-align:center; } .ipt{ border: 1px solid #eee; border-radius: 15px; } </style> <body> <img src="img/1.jpg" style="width: 100%;height: 100%;"> <div id="inputbox"> <div class="name">学生管理系统</div> <div class="select"> <ul> <li id="1" class="uli" onmousedown="$(this)">学生登入</li> <li id="2" onmousedown="$(this)" >导师登入</li> <li id="3" onmousedown="$(this)">教务登入</li> </ul> </div> <div class="getmeaadge" id="getmeaadge"> <form id="student_form" action="" method="post" name="form1"> <div class="input"> 学 号：<input type="text" name="userName" class="ipt"> </div> <div class="input"> 密 码：<input type="password" name="userword" class="ipt"> </div> <div class="input"> 验证码：<input type="text" name="userword" class="ipt"> </div> <div class="input"> <input type="radio" name="select" >记住密码 </div> <div class="input"> <input type="submit" name="submit" id="submit" value="登入"> </div> </form> <form id="teacher_form" action="" method="post" name="form2"> <div class="input"> 教师号：<input type="text" name="userName" class="ipt"> </div> <div class="input"> 密 码：<input type="password" name="userword" class="ipt"> </div> <div class="input"> 验证码：<input type="text" name="userword" class="ipt"> </div> <div class="input"> <input type="radio" name="select">记住密码 </div> <div class="input"> <input type="submit" name="submit" id="submit" value="登入"> </div> </form> <form id="school_form" action="" method="post" name="form3"> <div class="input"> 教务号：<input type="text" name="userName" class="ipt"> </div> <div class="input"> 密 码：<input type="password" name="userword" class="ipt"> </div> <div class="input"> 验证码：<input type="text" name="userword" class="ipt"> </div> <div class="input"> <input type="radio" name="select">记住密码 </div> <div class="input"> <input type="submit" name="submit" id="submit" value="登入"> </div> </form> </div> </div> </body> </html> <script> function $(id){ var lis = document.getElementsByTagName(‘li‘); for (var i = 0; i < lis.length; i++) { lis[i].setAttribute(‘class‘,‘‘); }; id.setAttribute(‘class‘,‘uli‘); var ele = document.getElementById(‘getmeaadge‘); ele.style.left=-(id.id-1)+‘00%‘; } </script>
对应结果的图片为
原文：https://www.cnblogs.com/ljn-note/p/13945883.html