asp.net - Auto Select Tab on Page Navigation -
i have view contains twitter bootstrap nav nav-pills control. embedded fine, , in each of tabs planning embed 2 partial views. below razor view
@using sitenet.models; @using microsoft.aspnet.identity; @model sitenet.models.manageuserviewmodel @{ viewbag.title = "manage account"; } <style type="text/css"> .manage { margin: 20px; } </style> <div class="manage"> <ul class="nav nav-pills" id="mytab"> <li><a data-toggle="tab" href="#manage">manage account</a></li> <li><a data-toggle="tab" href="#downloads">avalible downloads</a></li> </ul> <div class="tab-content"> <div id="manage" class="tab-pane active fade in"> <h2>@viewbag.title</h2> <p class="text-success">@viewbag.statusmessage</p> @*<div class="alert alert-success" data-toggle="collapse" role="alert">@viewbag.statusmessage</div>*@ <div class="row"> <div class="col-md-12"> @html.partial("_changeemailaddresspartial", model) </div> </div> <div class="row"> <div class="col-md-12"> @if (viewbag.haslocalpassword) { @html.partial("_changepasswordpartial") } else { @html.partial("_setpasswordpartial") } </div> </div> @section scripts { @scripts.render("~/bundles/jqueryval") } </div> <div id="downloads" class="tab-pane fade"> <h3>downloads</h3> <p>avalible downloads partial view.</p> </div> </div> </div> the problem when page loads content of first tab shown actual tab not selected (see below)
it should when page first loaded
i have tried utilize this solution, uses javascript below
<script> $('#mytab a').click(function (e) { e.preventdefault(); $(this).tab('show'); }); // store selected tab in hash value $("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) { var id = $(e.target).attr("href").substr(1); window.location.hash = id; }); // on load of page: switch selected tab var hash = window.location.hash; $('#mytab a[href="' + hash + '"]').tab('show'); </script> but not seem work (that is, not seem select first tab when page loaded). not store selected tab. how can
make first tab show selected when page first loaded? how can amend js above selected tab persisted between page navigations?thanks time.
to see problem self go codelab , paste in
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>example of twitter bootstrap 3 pills nav icons</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <style type="text/css"> .bs-example{ margin: 20px; } </style> </head> <body> <script> //$('#mytab a[href="manage"]').tab('show'); $('#mytab a').click(function (e) { e.preventdefault(); $(this).tab('show'); }); // store selected tab in hash value $("ul#mytab > li > a").on("shown.bs.tab", function (e) { var id = $(e.target).attr("href").substr(1); window.location.hash = id; }); //$("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) { // var id = $(e.target).attr("href").substr(1); // window.location.hash = id; //}); // on load of page: switch selected tab var hash = window.location.hash; $('#mytab a[href="#' + hash + '"]').tab('show'); </script> <div class="manage"> <ul class="nav nav-pills" id="mytab"> <li><a data-toggle="tab" href="#manage">manage account</a></li> <li><a data-toggle="tab" href="#downloads">avalible downloads</a></li> </ul> <div class="tab-content"> <div id="manage" class="tab-pane active fade in"> <h2>manage</h2> <p class="text-success">success</p> <div class="row"> <div class="col-md-12"> <p>partial view a</p> </div> </div> <div class="row"> <div class="col-md-12"> <p>partial view b</p> </div> </div> </div> <div id="downloads" class="tab-pane fade"> <h3>downloads</h3> <p>avalible downloads partial view.</p> </div> </div> </div> </body> </html> then click "show output", see problem.
i have no experience asp , whatsoever, bootstrap / jquery part guess solution this:
1.) give li want active class .active. example:
<li class="active"><a data-toggle="tab" href="#manage">manage account</a></li> the same goes according content element, did.
<div id="manage" class="tab-pane active fade in">xxx</div> take closer according bootstrap documentation: bootstrap tabs
2.) guess it's not working because script targets wrong element (ul.nav-tabs), doesn't exist in code. far can see code, have .nav-pills instead. try:
$("ul.nav-pills > li > a").on("shown.bs.tab", function (e) { var id = $(e.target).attr("href").substr(1); window.location.hash = id; }); or better, seek targeting unique id #mytab, this:
$("ul#mytab > li > a").on("shown.bs.tab", function (e) { var id = $(e.target).attr("href").substr(1); window.location.hash = id; }); if doesn't help or hint in right direction, please seek create working fiddle of generated html output can take closer @ code.
update
try code. works me on localhost.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>example of twitter bootstrap 3 pills nav icons</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <style type="text/css"> .bs-example{ margin: 20px; } </style> </head> <body> <script> $(document).ready(function() { if(location.hash) { $('a[href=' + location.hash + ']').tab('show'); } $(document.body).on("click", "a[data-toggle]", function(event) { location.hash = this.getattribute("href"); }); }); $(window).on('popstate', function() { var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href"); $('a[href=' + anchor + ']').tab('show'); }); </script> <div class="manage"> <ul class="nav nav-pills" id="mytab"> <li class="active"><a data-toggle="tab" href="#manage">manage account</a></li> <li><a data-toggle="tab" href="#downloads">avalible downloads</a></li> </ul> <div class="tab-content"> <div id="manage" class="tab-pane active fade in"> <h2>manage</h2> <p class="text-success">success</p> <div class="row"> <div class="col-md-12"> <p>partial view a</p> </div> </div> <div class="row"> <div class="col-md-12"> <p>partial view b</p> </div> </div> </div> <div id="downloads" class="tab-pane fade"> <h3>downloads</h3> <p>avalible downloads partial view.</p> </div> </div> </div>
asp.net twitter-bootstrap razor tabs asp.net-mvc-5
No comments:
Post a Comment