Jquery UI工具 - 选项卡窗格全部同时显示

Question

我正在使用Jquery工具为我的选项卡 - 出错了，我不知道（因为一切正常）..所有面板一次显示一些原因...这里是代码：

<div id="form"> 
    <ul class="tabs"> 
     <li><a href="#"><%= GetResourceString("TabHeaderBasic") %></a></li> 
     <li><a href="#"><%= GetResourceString("TabHeaderDetailed") %></a></li> 
    </ul> 

    <div class="panes">    
     <div class="pane"> 
      <h2><%= GetResourceString("PersonalInfoHeader") %></h2> 
      <%= this.TextBox(x => x.FirstName).LocalizedLabel().LocalizedTitle().Size(35).Required() %> 
      <%= this.TextBox(x => x.LastName).LocalizedLabel().LocalizedTitle().Size(35).Required() %> 
      <%= this.ValidationMessage(x => x.LastName) %> 
      <%= this 
       .Select(x => x.Gender) 
       .LocalizedLabel() 
       .LocalizedTitle() 
       .Options(ViewModel.GenderOptions) 
       .Selected(ViewModel.Gender.ToString()) 
       .FirstOption("", "Not Specified") 
       .Required() %><br /> 
      <%= this.DateTextBox(x => x.DateOfBirth).LocalizedLabel().LocalizedTitle().Required() %> 
      <%= this.ValidationMessage(x => x.DateOfBirth ) %> 

      <h2><%= GetResourceString("AccountDetailsHeader") %></h2> 
      <%= this.TextBox(x => x.EmailAddress).LocalizedLabel().LocalizedTitle().Size(35).Required() %> 

      <% if (ViewModel.IsExistingUser) { %> 
       <%= this.Password(x => x.OldPassword).LocalizedLabel().LocalizedTitle().Size(35)%> 
      <% } %> 

      <%= this.Password(x => x.Password).LocalizedLabel().LocalizedTitle().Size(35)%><br /> 
      <%= this.Password(x => x.PasswordConfirmation).LocalizedLabel().LocalizedTitle().Size(35)%><br /> 
      <span class="row"> 
      <%= this.CheckBox(x => x.AgreesToTermsAndConditions).LocalizedLabelAfter() %> 
      </span><br /> 
      <% if (!ViewModel.IsExistingUser) { %> 
       <%= this.CheckBox(x => x.AgreesToTermsAndConditions).LocalizedLabelAfter().Required() %> 
       <%= this.ValidationMessage(x => x.AgreesToTermsAndConditions) %> 
       <%= Html.GenerateCaptcha() %> 
       <%= this.ValidationMessage(x => x.CaptchaValid) %> 
      <% } %> 

      <p> 
       <% if (ViewModel.IsExistingUser) { %> 
       <%= this.SubmitButton(GetResourceString("ButtonSubmitEdit")).Class("register btn") %> 
       <% } else { %> 
       <input type="button" class="next btn" value="<%= GetLocalResourceObject("ButtonNext") %>" /> 
       <%= this.SubmitButton(GetResourceString("ButtonSubmitBasic")).Class("register btn")%> 
       <% } %> 
      </p> 
     </div> 

     <div class="pane"> 
      <h2><%= GetResourceString("AddressHeader") %></h2> 

      <% Html.RenderPartial("EditAddress", ViewModel.Address); %> 

      <span class="row"> 
       <%= this.CheckBox(x => x.OnlyShowLocalEvents).LocalizedLabelAfter().LocalizedTitle() %> 
      </span><br />     

      <h2>Other Details</h2> 
      <%= this.TextBox(x => x.PhoneNumber).LocalizedLabel().LocalizedTitle() %> 

      <p> 
       <% if (ViewModel.IsExistingUser) { %> 
       <%= this.SubmitButton(GetResourceString("ButtonSubmitEdit")).Class("register btn") %> 
       <% } else { %> 
       <input type="button" class="previous btn" value="<%= GetLocalResourceObject("ButtonPrevious") %>" /> 
       <%= this.SubmitButton(GetResourceString("ButtonSubmit")).Class("register btn") %> 
       <% } %> 
      </p> 
     </div> 
    </div> 
    </div> 

CSS

 
/* root element for tabs */ 
ul.tabs { 
    list-style:none; 
    margin:0 !important; 
    padding:0; 
    border-bottom:1px solid #666;  
    height:30px; 
} 

/* single tab */ 
ul.tabs li { 
    float:left; 
    text-indent:0; 
    padding:0; 
    margin:0 !important; 
    list-style-image:none !important; 
} 

/* link inside the tab. uses a background image */ 
ul.tabs a { 
    background: url(../images/blue.png) no-repeat -420px 0; 
    font-size:11px; 
    display:block; 
    height: 30px; 
    line-height:30px; 
    width: 134px; 
    text-align:center; 
    text-decoration:none; 
    color:#333; 
    padding:0px; 
    margin:0px; 
    position:relative; 
    top:1px; 
} 

ul.tabs a:active { 
    outline:none;   
} 

/* when mouse enters the tab move the background image */ 
ul.tabs a:hover { 
    background-position: -420px -31px; 
    color:#fff; 
} 

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */ 
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a { 
    background-position: -420px -62px;  
    cursor:default !important; 
    color:#000 !important; 
} 

/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */ 
/* width 1 */ 
ul.tabs a.s    { background-position: -553px 0; width:81px; } 
ul.tabs a.s:hover { background-position: -553px -31px; } 
ul.tabs a.s.current { background-position: -553px -62px; } 

/* width 2 */ 
ul.tabs a.l    { background-position: -248px -0px; width:174px; } 
ul.tabs a.l:hover { background-position: -248px -31px; } 
ul.tabs a.l.current { background-position: -248px -62px; } 


/* width 3 */ 
ul.tabs a.xl   { background-position: 0 -0px; width:248px; } 
ul.tabs a.xl:hover { background-position: 0 -31px; } 
ul.tabs a.xl.current { background-position: 0 -62px; } 


/* initially all panes are hidden */ 
div.panes label { 
    font-size: 95%; 
    font-weight: bold; 
    color: #222222; 
    line-height: 150%; 
    padding-bottom: 3px; 
    display:block; 
} 

/* tab pane styling */ 
/*div.panes > div.pane*/ 
div.panes > div.pane 
{ 

    padding: 15px 10px; 
    border: 1px solid #999; 
    border-top: 0; 
    font-size: 14px; 
    background: #fff 0 5px; 
    height: 100%; 
} 

初始化代码

 
function initializeWizard() { 
// $("ul.tabs").tabs("div.panes > div"); 

    $("ul.tabs").tabs("div.panes > div"); 
    var api = $("ul.tabs").tabs(0); 
    $(":input[type='button'].next").click(function() { api.next(); return false; }); 
    $(":input[type='button'].previous").click(function() { api.prev(); return false; }); 

} 

Answer 1

它可以是博士非常简单。您不需要包装单个窗格/标签，并且必须直接链接到标识的链接。

HTML：

<div id="form"> 
    <ul class="tabs"> 
     <li><a href="#Pane1"><%= GetResourceString("TabHeaderBasic") %></a></li> 
     <li><a href="#Pane2"><%= GetResourceString("TabHeaderDetailed") %></a></li> 
    </ul> 
     <div class="pane" id="Pane1"> 
      <h2><%= GetResourceString("PersonalInfoHeader") %></h2> 
      ... 
     </div> 

     <div class="pane" id="Pane2"> 
      <h2><%= GetResourceString("AddressHeader") %></h2> 
      ... 
     </div> 
    </div> 

的JavaScript：

$('#form').tabs(); 

Answer 2

如果你看到所有在同一时间标签面板的，它可能是你没有包含在定义的样式表随UI一起提供的'ui.core.css'文件。

该文件应与“ui.tabs.css”位于相同的目录中，这是“.ui-tabs”样式其余部分定义的位置。使用'ui.all.css'可能会更容易。