Jquery ui 工具 - 选项卡窗格一次全部显示

Posted 2023-02-19

【中文标题】Jquery ui 工具 - 选项卡窗格一次全部显示

【英文标题】：Jquery ui tools - tab panes all showing at once

【发布时间】：2010-12-27 16:18:20

【问题描述】：

我正在为我的选项卡使用 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

/* 选项卡的根元素 */ ul.tabs 列表样式：无； 边距：0！重要； 填充：0； 边框底部：1px 实心 #666; 高度：30px； /* 单个标签 */ ul.tabs li 向左飘浮; 文本缩进：0； 填充：0； 边距：0！重要； 列表样式图像：无！重要； /* 选项卡内的链接。使用背景图片 */ ul.tabs 背景：url（../images/blue.png）无重复-420px 0； 字体大小：11px； 显示：块； 高度：30px； 行高：30px； 宽度：134px； 文本对齐：居中； 文字装饰：无； 颜色：#333; 填充：0px； 边距：0px； 位置：相对； 顶部：1px； ul.tabs：活动 大纲：无； /* 当鼠标进入选项卡时移动背景图像 */ ul.tabs：悬停 背景位置：-420px -31px； 颜色：#fff; /* 活动选项卡使用类名“当前”。它的亮点也是通过移动背景图像来完成的。 */ ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a 背景位置：-420px -62px； 光标：默认！重要； 颜色：#000 ！重要； /* 不同宽度的选项卡：使用类名：w1、w2、w3 或 w2 */ /* 宽度 1 */ ul.tabs a.s 背景位置：-553px 0;宽度：81px； ul.tabs a.s:hover 背景位置：-553px -31px; ul.tabs a.s.current 背景位置：-553px -62px; /* 宽度 2 */ ul.tabs a.l 背景位置：-248px -0px;宽度：174px； ul.tabs a.l:hover 背景位置：-248px -31px; ul.tabs a.l.current 背景位置：-248px -62px; /* 宽度 3 */ ul.tabs a.xl 背景位置：0 -0px;宽度：248px； ul.tabs a.xl:hover 背景位置: 0 -31px; ul.tabs a.xl.current 背景位置：0 -62px; /* 最初所有的窗格都是隐藏的 */ div.panes 标签 字体大小：95%； 字体粗细：粗体； 颜色：#222222； 行高：150%； 底部填充：3px； 显示：块； /* 选项卡窗格样式 */ /*div.panes > div.pane*/ div.panes > div.pane 填充：15px 10px； 边框：1px 实心 #999; 边界顶部：0； 字体大小：14px； 背景：#fff 0 5px； 高度：100%；

初始化代码

函数初始化向导（） // $("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; );

【参考方案1】：

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

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

【参考方案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();