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

Posted 2023-05-08

【中文标题】为啥单击按钮后`JQuery`选项卡会丢失样式

【英文标题】：Why do `JQuery` tabs lose styling after a button click为什么单击按钮后`JQuery`选项卡会丢失样式

【发布时间】：2019-08-01 23:55:18

【问题描述】：

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

我在 this article. 之后为我的方法建模，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];
     ...
 

【参考方案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 完成后重新应用它。有关详细信息，请参阅this 答案。 但基本上你需要将活动标签 ID 存储在 SessionStorage、cookie 或隐藏输入中，然后在 prm.add_endRequest(function () 中重新应用它

【讨论】：

这解决了样式丢失的问题，但是关于在回发后保持所选选项卡打开，我有一个问题。 selected_tab 变量是否没有活动标签 ID？

很可能就是这样。我没有检查用于创建实际选项卡的代码。但是，如果您可以从该变量重新应用选项卡，它应该可以工作。

不，它只是返回一个索引变量 0。不确定这是否是应该返回的。

您可以使用读取 ID 的 jquery 将点击事件绑定到选项卡。但是你需要给他们一个<a href="#tab-1" id="ID is Needed">