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

Question

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

在这篇文章之后，我正在为我的方法建模。 JQuery在我的范围之外

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

包装器，而 html 组件在里面。

每当我单击一个按钮时，我的选项卡就完全失去了它们的CSS样式，并且我看到了所有的选项卡内容，而不仅仅是

<div id="current-tab">

对于那个标签。

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

我的猜测是它以某种方式与回发或更新面板有关，但我不确定为什么在触发按钮时在page_load下添加的C#代码不会在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

你是对的，它与部分回发有关。 因此，为了让 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 完成后重新应用它。 有关详细信息，请参阅此答案。 但基本上你需要在 SessionStorage、cookie 或隐藏输入中存储活动标签 ID 并在prm.add_endRequest(function () {