title: ASP.NET MVC JQuery UI TAB - How to make post-back on each tab click. How to make it SEO friendy?
body: <p>I am using jquery tab as given bellow. Clicking on each tab it make a AJAX call according to its href url. Problem is AJAX call is not SEO friendly. How i can make it SEO friendly? How to do a postback on each tab click and keep current tab as selected after postback. Also how to update url on each tab click i mean if user click on [SPECIFICATION] tab, after post back url should look like www.domnainname/cardetails/specification</p>
  
  <p>I AM USING ASP.NET MVC 4.0.</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"&gt;&lt;/script&gt;
  
  
  &lt;script type="text/javascript"&gt;
      $(function ($) {
          $('#example').tabs();
      });
  &lt;/script&gt;
  
  
  &lt;div id="example"  class="tabs"  style="width: 698px;"&gt;
                  &lt;ul style="list-style: none;"&gt;
                      &lt;li&gt;&lt;a href="/Details/Overview" title="tabs-1"&gt;Overview&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/Version/Details?ID=@ViewBag.versionId&amp;grpId=5" title="tabs-2"&gt;Specifications&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/Version/Details?ID=@ViewBag.versionId&amp;grpId=1" title="tabs-3"&gt;Exterior&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/Version/Details?ID=@ViewBag.versionId&amp;grpId=2" title="tabs-4" &gt;Interior&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/Version/Details?ID=@ViewBag.versionId&amp;grpId=3" title="tabs-5"&gt;Dimensions&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/Version/Details?ID=@ViewBag.versionId&amp;grpId=4" title="tabs-6"&gt;Feature&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/Version/Details?versionID=@ViewBag.versionId&amp;grpId=6" title="tabs-7"&gt;Instrument Panel&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;div id="tabs-1" style="width: 698px;"&gt;
                      This is Tab one
                  &lt;/div&gt;
                  &lt;div id="tabs-2"&gt;
                  &lt;/div&gt;
                  &lt;div id="tabs-3"&gt;
                  &lt;/div&gt;
                  &lt;div id="tabs-4"&gt;
                  &lt;/div&gt;
                  &lt;div id="tabs-5"&gt;
                  &lt;/div&gt;
                  &lt;div id="tabs-6"&gt;
                  &lt;/div&gt;
                  &lt;div id="tabs-7"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>Thanks,</p>
  
  <p>@Paul</p>