選項卡方式實現的多角色登陸表單程式碼例項

antzone發表於2017-03-22

在很多的網站，會員的角色會有不同分類，所以利用選項卡來實現不同的角色登陸是一個不錯的選擇，下面是一個能夠實現此功能的程式碼例項和大家分享一下，程式碼非常的簡單，這裡就不多介紹了，有興趣的朋友可以自行做一下分析。

程式碼如下;

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0;
  padding:0;
  word-wrap:break-word;
  word-break:break-all;
}
body{
  font-family:"宋體", "Arial";
  font-size:12px;
  background:#fff;
  min-width:800px;
}
ul, li{
  list-style:none;
}
a{
  text-decoration:none;
  color:#555;
}
/**tabs**/ 
.tabPanel ul {
  height:23px;
  border-bottom:1px solid #CECECE;
  width:294px;
}
.tabPanel ul li{
  float:left;
  margin:0 2px 0 0;
  border:1px solid #CECECE;
  font-size:13px;
  height:22px;
  line-height:22px;
  width:94px;
  text-align:center;
  cursor:pointer;
  font-family:"Microsoft Yahei";
  text-shadow:0 1px 0 #fff;
  border-radius:4px 4px 0 0;
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.5);
 
}
.tabPanel .hit{
  border-color:#B9D894 #B9D894 #FFF;
  cursor:pointer;
  color:black;
  text-shadow:0 1px 0 #FFF;
}
.pane{
  border:1px solid #B9D894;
  border-top:0;
  min-height:100px;
  background-color:#fff;
  display:none;
  width:290px;
  height:285px
}
.pane p{padding:15px 15px 0 10px;}
.pane h4{
  padding:15px 15px 0 10px;
  font-size:14px;
  font-weight:bold;
}
#Main{
  border-width: 1px;
  padding: 30px 20px 30px 30px;
  text-align: left;
  font-family:"Microsoft Yahei";
  font-size: 13px;
}
p{
  margin:0;
  padding:6px 0;
}
 
input.Textbox{
  font-family:verdana, arial, sans-serif;
  height:20px;
  width:160px;
  border:1px solid #CECECE;
}
 
.Button{
  color:#FFF;
  font-family:"Microsoft Yahei";
  font-size:13px;
  font-weight:bold;
  width:60px;
  background-color:#73AD2E;
  border-radius:5px;
  border:none;
}
.form_div1{
  height:50px;
  overflow:hidden;
}
.form_div1 span{
  display:block;
  float:left;
  overflow:hidden;
  padding:0 0 0 6px;
}
.form_div1 .span {
  color:#999;
  padding-top:6px;
}
.form_div1 .input2 {
        width: 109px;
}
.form_div1 .span1 {
  width:55px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript"> 
$(function(){ 
  $('.tabPanel ul li').click(function(){ 
    $(this).addClass('hit').siblings().removeClass('hit'); 
    $('.panes>div:eq('+$(this).index()+')').show().siblings().hide(); 
  }) 
}) 
</script>
</head>
<body>
<div >
  <div class="tabPanel">
    <ul>
      <li class="hit">企業方</li>
      <li>供應方</li>
      <li>京體網</li>
    </ul>
    <div class="panes">
      <div class="pane" style="display:block;">
        <div align="center">
          <div id="Main">
            <div class="form_div1">
              <span class="span1">使用者名稱：</span>
              <input type="text" class="Textbox" />
            </div>
            <div class="form_div1">
              <span class="span1">密　碼：</span>
              <input type="password" class="Textbox" />
            </div>
            <div>
              <div class="form_div1">
                <span class="span1"> </span>
                <input type="submit" name="btnLogin" value="登 錄" class="Button" style="margin-top: 8px" />
                <a href="#">忘記密碼</a> </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pane">
        <h4>第二個選項卡</h4>
        <p>螞蟻部落二</p>
      </div>
      <div class="pane">
        <h4>第三個選項卡</h4>
        <p>螞蟻部落三</p>
      </div>
    </div>
  </div>
</div>
</body>
</html>

相關文章