0

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

Paul
  • 457
  • 2
  • 11
  • 26

3 Answers3

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

Paul
  • 457
  • 2
  • 11
  • 26
0

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><a href="/Details/Overview">This is Tab one</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;">
                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?

Lowkase
  • 5,631
  • 2
  • 30
  • 48
0

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><a href="#tabs-1">Overview</a></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><a href="#tabs-8">Color</a></li>
Rick Petersen
  • 734
  • 5
  • 15
  • then how to call url on tab click? – Paul Nov 28 '12 at 19:49
  • Well... why do you want to call those URLS on the tab clicks? The way jQuery UI tabs work is that the hrefs in the anchors need to match the div ids as above. At least, that's the way I understand the static loading methods. Here is a SO thread where someone wanted to do something like this: http://stackoverflow.com/questions/502391/jquery-tabs-load-contents-only-when-clicked – Rick Petersen Nov 28 '12 at 19:52
  • Finally i got a simple solution by matching a title attribute and the container's id. – Paul Nov 29 '12 at 15:52