Active tab after click.

Question

How to active a tab after click in mvc viiew(layout page).

Sachin Singh · Answer

use css and Jquery $( '.achor' ).on( 'click' , function() { $( 'li' ).removeClass( 'active' ); $( this ).closest( 'li' ).addClass( 'active' ); }); .active { color: red; background-color: black; }

Mageshwaran R · Answer

Try this code, Razor Page: "text/javascript" > $( function () { if ($( '#hfSelected' ).val() != '' ) { var enabled = []; var disabled = []; if ($( '#hfEnabled' ).val() != '' ) { enabled = $( '#hfEnabled' ).val().split( ',' ).map(Number); } if ($( '#hfDisabled' ).val() != '' ) { disabled = $( '#hfDisabled' ).val().split( ',' ).map(Number); } $( "#tabs" ).tabs({ active: $( '#hfSelected' ).val(), enabled: enabled, disabled: disabled }); } else { $( "#tabs" ).tabs({ disabled: [1, 2] }); } $( '#ddlMaterial' ).change( function () { $( '#req_material' ).val($(this).find( 'option:selected' ).text()); }); $( '#ddlQuantity' ).change( function () { $( '#req_quantity' ).val($(this).find( 'option:selected' ).text()); }); }); $( function () { var selector = '@ViewBag.ActiveTab' ; if(selector) { $( "#tabs" +selector).tab( 'show' ); } }); "hidden" value= "@TempData[" Selected "]" id= "hfSelected" /> "hidden" value= "@TempData[" Enabled "]" id= "hfEnabled" /> "hidden" value= "@TempData[" Disabled "]" id= "hfDisabled" /> "tabs" > "nav nav-pills" > "active" > "#tabs-1" data-toggle= "tab" >Details "#tabs-2" data-toggle= "tab" >Material "tab-pane active" id= "tabs-1" > Hello "btnSaveMaterial" type= "submit" value= "Next" class= "btn btn-primary" /> "tab-pane" id= "tabs-2" > @using (Html.BeginForm( "AddMaterial" , "Home" , FormMethod.Post)) { //////form section details } Controller: [HttpPost] public ActionResult AddMaterial(ItemModel model, string id) { TempData[ "Selected" ] = "2" ; TempData[ "Enabled" ] = "0,1,2" ; id = Convert.ToString(TempData[ "NewID" ]); ViewBag.ActiveTab = id; ////insert data into database part return new RedirectResult(Url.Action( "FormRequest" , new { id }) + "#tabs-2" ); }

Active tab after click.

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (2)