单击按钮后，为什么`JQuery`选项卡会丢失样式

Question

我在我的JQuery应用程序中使用Asp.Net/C#选项卡。

我在this article.之后模拟我的方法JQuery在我之外

<asp:UpdatePanel ID="UpdatePanel1"...></asp:UpdatePanel>

包含html组件的内容。

每当我点击一个按钮，我的标签完全失去了他们的CSS样式，我看到所有的标签内容，而不仅仅是

<div id="current-tab">

对于该选项卡。

为什么会发生这种情况，我该如何解决？

我的猜测是它与post-back或更新面板有关，不知何故，但我不确定为什么C#下添加的page_load代码不会在按钮被触发时保持选中的选项卡在post-back上。

ASPX

<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function () {
        var tabs = $("#tabs").tabs({
            activate: function (e, i) {
                selected_tab = i.index;
            }
        });
        selected_tab = $("[id$=selected_tab]").val() != "" ? parseInt($("[id$=selected_tab]").val()) : 0;
        tabs.tabs('select', selected_tab);
        $("form").submit(function () {
            $("[id$=selected_tab]").val(selected_tab);
        });
        ...
</script>
....
<table>
  <tr>
    <td style="padding: 5px;">                                
      <div id="tabs">
        <ul>
          <li><a href="#tab-1">Tier 1</a></li>
          <li><a href="#tab-2">Tier 2</a></li>
          <li><a href="#tab-3">Tier 3</a></li>
          <li><a href="#tab-4">Tier 4</a></li>
        </ul>
        <div class="tab-content">
            <div id="tab-1">
             ...
            </div>
            <div id="tab-2">
             ...
            </div>
            <div id="tab-3">
             ...
            </div>
            <div id="tab-4">
             ...
            </div>
          </div>
        </div>
        <asp:HiddenField ID="selected_tab" runat="server" />
      </td>
  </tr>
</table>  

C＃

 protected void Page_Load(object sender, EventArgs e)
 {
     ...
     selected_tab.Value = Request.Form[selected_tab.UniqueID];
     ...
 }

Answer 1

你是对的，它与Partial PostBack有关。因此，为了使jquery函数再次工作，您需要在Partial PostBack完成后重新绑定它。

<script type="text/javascript">
    $(document).ready(function () {
        buildTabs();
    });

    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_endRequest(function () {
        buildTabs();
    });

    function buildTabs() {
        var tabs = $("#tabs").tabs({
            activate: function (e, i) {
                selected_tab = i.index;
            }
        });
        selected_tab = $("[id$=selected_tab]").val() != "" ? parseInt($("[id$=selected_tab]").val()) : 0;
        tabs.tabs('select', selected_tab);
        $("form").submit(function () {
            $("[id$=selected_tab]").val(selected_tab);
        });
    }
</script>

但选中的标签是另一回事。您还需要将活动选项卡存储在某处，并在部分PostBack完成后重新应用它。有关详细信息，请参阅this答案。但基本上你需要在SessionStorage，cookie或Hiddden输入中存储活动标签ID并在prm.add_endRequest(function () {中重新应用它