Question

考虑：

<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>

上面的代码位于名为ABC的PartialView中。

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

上面的代码是局部视图，名为XYZ。

所以我有两个部分视图，Abc和XYZ。在一个视图上调用这两个部分视图。在视图XYZ上，我点击了一个actionLink按钮，我可以在ABC中填写详细信息。

现在，在ABC中我有一个Tab面板，如上面的代码所示。当页面第一次加载时，我会正确显示jQuery选项卡。当我单击ActionLink按钮时，选项卡将以List的形式显示。

我不知道发生了什么。所以这是我的问题。为什么他们在点击动作链接时会丢失CSS？

我已将所有jQuery文件包含在我的代码中。

Answer 1

jQuery UI Tabs组件不仅仅是CSS - 它还使用JavaScript代码修改#tabs下的元素。当您单击链接时，ABC中的所有内容都将替换为服务器中的版本，但不包括这些修改。

如果在包含选项卡的元素上使用不显眼的Ajax更新，则需要向AjaxOptions添加一个OnComplete处理程序，调用$("#tabs").tabs()以在HTML更新后重做这些修改。

jQuery选项卡丢失CSS

1 个答案: