選項卡登入，選項卡
多角色選項卡登入如下：
其實是綠色的邊框 選中的角色 也會標綠 但是出來就成這效果了 可以去我個人部落格看demo 地址
html代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>角色選項卡</title><link rel="stylesheet" type="text/css" href="css/style.css" media="all" /><script type="text/javascript" src="js/jquery-1.4.2.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 style="line-height:32px;margin-top:10px;"> <img src="images/li.png" /> <a href="#" >免費申請成為供應商</a> <br /> <img src="images/li.png" /> <a href="#">免費申請成為企業方</a> </div> </div> </div> </div> <div class="pane"> <h4>Secend tab content</h4> <p>First tab content</p> </div> <div class="pane"> <h4>Third tab content</h4> <p>First tab content</p> </div></div> </div></div></body></html>
@charset "utf-8";/* CSS Document */*{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;}h3{font-size:14px;font-weight:bold;margin:0em 0 0.5em 0;}h2{font-size:16px;font-weight:bold;margin:1em 0}/**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);/*background:#ddd;background:-moz-linear-gradient(top, #eee, #ddd);background:-webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));*/}.tabPanel .hit{border-color:#B9D894 #B9D894 #FFF;cursor:pointer;color:black;text-shadow:0 1px 0 #FFF;/*background:#fff;background:-webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#fff));background:-moz-linear-gradient(top, #e1e1e1, #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;}/**88888888888888888888888888*/#Main { /* background-color: #fff; border-color: #bbb; border-right: 1px solid #bbb; border-style: solid;*/ border-width: 1px; padding: 30px 20px 30px 30px; text-align: left; font-family:"Microsoft Yahei"; font-size: 13px;}div#Heading { color: #904; font-family: arial; font-size: 150%; font-weight: bold; margin: 0; padding: 0 0 15px;}h2 { border-bottom: 1px solid #ddd; color: #999; font-size: 105%; font-weight: bold; margin: 0 0 8px; padding: 0; text-transform: uppercase;}p { margin: 0; padding: 6px 0;}.MyLabel { color: #999; display: block; font-size: 13px; font-weight: bold; margin: 6px 0 2px; text-transform: uppercase;}input.Textbox { font-family: verdana,arial,sans-serif; height: 20px; /*padding: 2px;*/ width: 160px;border:1px solid #CECECE;}a.Button:link { background: none repeat scroll 0 0 #904; border-color: #999; border-right: 1px solid #999; border-width: 1px; color: #fff; display: block; font-family: Verdana; font-size: 15px; font-weight: bold; padding: 5px 12px 3px 20px; width: 50px;}a.Button:visited { background: none repeat scroll 0 0 #904; border-color: #999; border-right: 1px solid #999; border-style: solid; border-width: 1px; color: #fff; display: block; font-size: 15px; font-weight: bold; padding: 3px 12px; width: 60px;}span.ErrorMessage { color: #904; display: block; font-weight: bold;}p.Small { font-size: 85%; margin-top: 12px;}.Button { color:#FFF; font-family:"Microsoft Yahei"; font-size: 13px; font-weight: bold;/* padding-bottom: 3px; padding-top: 5px;*/ width: 60px;background-color:#73AD2E;border-radius:5px;border:none;}a.tip_lnk:link, a.tip_lnk:active, a.tip_lnk:visited { color:#444; text-decoration: underline;}a.top_return { font-weight: normal; padding-left: 5px;} .form_div1 { height: 50px; overflow: hidden;}.form_div1 span { display: block; float: left; overflow: hidden; padding: 0 0 0 6px;}.form_div1 .span2 { color: #999; padding-top: 6px;}.form_div1 .input1 { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-color: pink; border-image: none; border-right: 1px solid pink; border-style: solid; border-width: 1px; color: #666; height: 20px; line-height: 20px; width: 198px;}.form_div1 .input2 { width: 109px;}.form_div1 .span1 {/* padding-top: 6px; text-align: right;*/ width: 55px;}.b{ margin:15px 10px 10px 10px;}
解決辦法就是關閉SmartScreen篩選器。
開啟IE8的 工具->選項->安全->選擇Internet->自訂層級，找到 使用 SmartScreen 篩選工具，選擇禁用，然後確定就可以了
為何每次開啟新選項卡都要重新登入
看看你的IE選項>常規>取消勾選"退出時刪除記錄或者點刪除按鈕,取消勾選"Cookie",重啟瀏覽器,
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
