Я использую инструменты 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; });
}