JQuery UI tab - Always render html in first div - asp.net-mvc

Question

I am using jquery UI Tab in my asp.net MVC(RAZOR) application. Issue that i found is that each tab click render the html in first div i.e here div with id "tabs-1".
Jquery code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function ($) {
$('#example').tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
$("#example li").removeClass("ui-corner-top").addClass("ui-corner-left");
});
</script>
HTML:
<div id="example" class="tabs" style="width: 698px;">
<ul style="list-style: none;">
<li>Overview</li>
<li><a href="/Version/Details?ID=#ViewBag.versionId&grpId=5" >Specifications</a></li>
<li><a href="/Version/Details?ID=#ViewBag.versionId&grpId=1" >Exterior</a></li>
<li><a href="/Version/Details?ID=#ViewBag.versionId&grpId=2" >Interior</a></li>
<li><a href="/Version/Details?ID=#ViewBag.versionId&grpId=3" >Dimensions</a></li>
<li><a href="/Version/Details?ID=#ViewBag.versionId&grpId=4" >Feature</a></li>
<li><a href="/Version/Details?versionID=#ViewBag.versionId&grpId=6" >Instrument Panel</a></li>
<li>Color</li>
</ul>
<div id="tabs-1" style="width: 698px;">
This is Tab one
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
<div id="tabs-4">
</div>
<div id="tabs-5">
</div>
<div id="tabs-6">
</div>
<div id="tabs-7">
</div>
<div id="tabs-8">
</div>
</div>
Please guide me.
Thanks,
#paul

Answer 1

Finally i got the solution by matching a title attribute and the container's id like bellow
<li>OverView</li>
<li>Specifications</li>
<div id="tabs-1" style="width: 698px;">This is Tab one</div>
<div id="tabs-2"> </div>
Thanks,
#paul

Answer 2

I think id="example" should be down one level with the class="tabs" div.
<div id="example" class="tabs" style="width: 698px;">
<ul style="list-style: none;">
<li>This is Tab one</li>
<li><a href="/Version/Details?ID=#ViewBag.versionId&grpId=5" >Specifications</a></li>
<li><a href="/Version/Details?ID=#ViewBag.versionId&grpId=1" >Exterior</a></li>
<li><a href="/Version/Details?ID=#ViewBag.versionId&grpId=2" >Interior</a></li>
<li><a href="/Version/Details?ID=#ViewBag.versionId&grpId=3" >Dimensions</a></li>
<li><a href="/Version/Details?ID=#ViewBag.versionId&grpId=4" >Feature</a></li>
<li><a href="/Version/Details?versionID=#ViewBag.versionId&grpId=6" >Instrument Panel</a></li>
<li>Color</li>
</ul>
<div id="tabs-1" style="width: 698px;">
Overview
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
<div id="tabs-4">
</div>
<div id="tabs-5">
</div>
<div id="tabs-6">
</div>
<div id="tabs-7">
</div>
<div id="tabs-8">
</div>
</div>
</div>
EDIT:
$('#example').tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
$("#example li").removeClass("ui-corner-top").addClass("ui-corner-left");
$('#example')
What is the third line in your jquery supposed to be doing? Is it generating a javascript error that prevents the tabs from functioning correctly?

Answer 3

Your problem is your hrefs in your anchor tags. You have to format them as "#tabs-number".
Here is a jsfiddle showing you it working (completely without any CSS styling since that was not provided in your example either. But each tab being clicked takes you to different tab contents.
http://jsfiddle.net/UBxPJ/
But basically, the change is:
<li>Overview</li>
<li><a href="#tabs-2" >Specifications</a></li>
<li><a href="#tabs-3" >Exterior</a></li>
<li><a href="#tabs-4" >Interior</a></li>
<li><a href="#tabs-5" >Dimensions</a></li>
<li><a href="#tabs-6" >Feature</a></li>
<li><a href="#tabs-7" >Instrument Panel</a></li>
<li>Color</li>