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><a href="/Details/Overview">Overview</a></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><a href="#tabs-8">Color</a></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><a href="/Details/Overview" title="tabs-1">OverView</a></li>
<li><a href="/Version/Details?ID=@ViewBag.versionId&grpId=5" title="tabs-2">Specifications</a></li>


<div id="tabs-1" style="width: 698px;">This is Tab one</div>
<div id="tabs-2"> </div>

Thanks,

@paul