jQuery tab losing CSS

Consider:

<div id="tabs" >
    <ul>
        <li><a href="#Tab1">A</a></li>
        <li><a href="#Tab2">B</a></li>
        <li><a href="#Tab3">C</a></li>
    </ul><br />

    <div id="Tab1" style="margin:0px; padding:0px;">
        <ul>
            <li><a href="#InnerTab1">Inner A</a></li>
            <li><a href="#InnerTab1">Inner B</a></li>
            <li><a href="#InnerTab1">Inner C</a></li>
        </ul>
        <div id="InnerTab1">Welcome to Inner Tab1</div>
        <div id="InnerTab2"><p>Welcome to Inner Tab1</p></div>
        <div id="InnerTab3"><p>Welcome to Inner Tab1</p></div>
   </div>
   <div id="Tab2"><p>Tab2</p></div>
   <div id="Tab3"><p>Tab3</p></div>
</div>

The above code is in a PartialView named ABC.

<%= Ajax.ActionLink("Select", "Action", new { Id = item.CustomerID }, new AjaxOptions { UpdateTargetId = "Abc" })%>

And the above code is in a partial view as well named XYZ.

So I have two partial views, Abc and XYZ. These 开发者_JAVA技巧two partial views are called on one view. On the view XYZ, I have a actionLink button on the click of which I am able to fill in details in ABC.

Now, in ABC I have a Tab panel as shown in the above code. When the page is load for the first time, I get the jQuery tab properly displayed. When I click on the ActionLink button, the tabs are displayed in the form of List.

I don't know what is happeneing. So this is my problem. Why are they losing their CSS on the click of action link?

I have included all the jQuery files in my code.

The jQuery UI Tabs component is not just CSS - it also uses JavaScript code to modify the elements under #tabs. When you click on the link, everything inside ABC is replaced with the version from the server, which does not include those modifications.

If you are using unobtrusive Ajax updates on an element that contains tabs, you will need to add an OnComplete handler to AjaxOptions that calls $("#tabs").tabs() to redo those modifications after the HTML is updated.