asp.net - Jquery ui 工具 - 选项卡 Pane 一次全部显示

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

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

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