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

Question

我在我的 Asp.Net/C# 应用程序中使用 JQuery 标签。

我在 this article. 之后对我的方法进行建模 JQuery 在我的

之外

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

wrapper 而 html 组件在里面。

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

<div id="current-tab">

该选项卡。

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

我的猜测是它与 post-back 或更新面板有某种关系，但我不确定为什么 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 函数再次工作，您需要在部分回发完成后重新绑定它。

<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 答案。但基本上您需要将活动标签 ID 存储在 SessionStorage、cookie 或 Hiddden 输入中，然后在 prm.add_endRequest(function () {

中重新应用它

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

Why do `JQuery` tabs lose styling after a button click

c#

jquery

asp.net

tabs

postback