<html> <head> <title></title> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"> <style> #root-container { margin: 20px; } </style> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script> $(function () { $('.nav li a').click(function () { $(this).parentsUntil('#root-container').last().children().removeClass('active'); var $url = $(this).attr('href'); $.ajax({ url: $url, type: 'POST', success: function ($data) { $('#tab-container').html($data); } }); if (location.pathname != $url) { window.history.pushState({ path: $url }, $(this).text(), $url); } $(this).parent().addClass('active'); return false; }); $('.nav li a').each(function () { if (location.pathname == $(this).attr('href')) { $(this).click(); return false; } }); if ($('.nav li.active').size() == 0) { $('.nav li a').first().click(); } }); </script> </head> <body> <input type="hidden" id="current-path" value="@ViewBag.CurrentPath" /> <div id="root-container"> <ul class="nav nav-tabs"> <li><a href="~/Home/jQuery">What is jQuery?</a></li> <li><a href="~/Home/jQueryUI">jQueryUI</a></li> <li><a href="~/Home/Bootstrap">Bootstrap</a></li> </ul> <div id="tab-container"></div> </div> </body> </html>HomeController.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MvcApplication1.Controllers { public class HomeController : Controller { public ActionResult Index() { ViewBag.CurrentPath = Request.Url.AbsolutePath; return View(); } public ActionResult jQuery() { switch (Request.HttpMethod) { case "POST": return View(); default: return View("Index"); } } public ActionResult jQueryUI() { switch (Request.HttpMethod) { case "POST": return View(); default: return View("Index"); } } public ActionResult Bootstrap() { switch (Request.HttpMethod) { case "POST": return View(); default: return View("Index"); } } } }
Reference: Manipulating the browser history