Using tabs in asp.net mvc with jquery ui

Question

I am trying to create tabs in my mvc application using jquery ui.

I tried the following code:

<script src="../../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('#tabs').tabs();
});
</script>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Exploded pie slice</a></li>
<li><a href="#tabs-2">Normal pie chart</a></li>
</ul>
<div id="tabs-1">@(Html.Partial("PartialView1"))</div>
<div id="tabs-2">@(Html.Partial("PartialView2"))</div>
</div>

I saw something like the above code in jquery ui demo. Please advice me what I'm missing in my code because I only get two links instead of tabs and my two partial view pages are displayed in the index page.

Thanks, Anandaraj

Mathew Thompson · Accepted Answer · 2013-05-30 09:50:24Z

3

You haven't included the jQuery UI CSS file.

Either use the default skin, or pick one, or even build your own.

Bear in mind that you'll need all the images too, so follow my second link to download the whole theme (either an existing one or one you have built).

answered May 30, 2013 at 9:50

Mathew Thompson

56.5k15 gold badges131 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using tabs in asp.net mvc with jquery ui

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related