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

如果您同时看到所有选项卡窗格，则可能是您没有包含 UI 附带的“ui.core.css”文件中定义的样式表。

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

Answer 2

它可以大大简化。您不需要包装各个窗格/选项卡，并且必须有直接指向 ID 的链接。

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();