jquery - 单击选项卡内的按钮后，Jquery Tabs 重置选项卡

Question

当我单击选项卡内的按钮时，该选项卡正在加载并返回到第一个选项卡。这张图片将使事情变得清晰：

例如，如果我单击 REDSEA，选择的选项卡 ASIA 将更改并返回到第一个 AFRICA，我需要的是当我单击按钮 REDSEA 时留在所选的选项卡 ASIA 内！

这是我使用的代码：

<script>
      $(function () {
          $("#tabs").tabs();
      });
  </script>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">AFRICA</a></li>
    <li><a href="#tabs-2">EUROPE</a></li>
    <li><a href="#tabs-3">AMERICA</a></li>
    <li><a href="#tabs-4">ASIA</a></li>
    <li><a href="#tabs-5">OTHER TRADE</a></li>
  </ul>
  <div id="tabs-1">

    <asp:Button id="tr" OnClick="trd_clk1" runat="server" text='<%# Bind("trade") %>' UseSubmitBehavior="False" CommandName="tr" Width="105px" Height="22"  CommandArgument='<%# Bind("trade") %>' CssClass="btn" />&nbsp;&nbsp;&nbsp;

     </div>
  'The same thing for other tabs
</div>

Answer 1

尝试使用此方法在选项卡更改时设置 URL 上的哈希更改并在回发时维护哈希

 <script>
         $(function () {
            $( "#tabs" ).tabs();
            // set hash on  tab change
            $('#tabs ul li a').click(function () {
                location.hash = $(this).attr('href');
            });

            //maintain hash on post back
            $('#<%=Page.Form.ClientID%>').attr('onsubmit', 'this.action += top.location.hash');
          })
    </script>

    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">AFRICA</a></li>
            <li><a href="#tabs-2">EUROPE</a></li>
            <li><a href="#tabs-3">AMERICA</a></li>
         </ul>
        <div id="tabs-1">
            tab 1
        </div>
        <div id="tabs-2">
            tab 2
            <asp:Button ID="Button2" runat="server" Text='click'  />
        </div>

        <div id="tabs-3">
            tab 3
            <asp:Button ID="Button3"  runat="server" Text='click'  />
        </div>
    </div>

您只需要更改 JavaScript 代码

Answer 2

我有另一个解决方案，用 chrome、IE 和 safari 实现和测试。

我正在使用“localStorage”对象，它假设所有支持 localStorage 的浏览器都可以使用。

在选项卡的单击事件中，我将 currentTab 值存储到本地存储。

这将适用于内容页面不附加带有哈希的 url。

$(document).ready(function() {
        jQuery('.ctabs .ctab-links a').on('click', function(e) {
            var currentAttrValue = jQuery(this).attr('href');
            localStorage["currentTab"] = currentAttrValue;

            // Show/Hide Tabs
            jQuery('.ctabs ' + currentAttrValue).show().siblings().hide();

            // Change/remove current tab to active
            jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

            e.preventDefault();
        });
        if (localStorage["currentTab"]) {
            // Show/Hide Tabs
            jQuery('.ctabs ' + localStorage["currentTab"]).show().siblings().hide();
            // Change/remove current tab to active
            jQuery('.ctabs .ctab-links a[href$="' + localStorage["currentTab"] + '"]').parent('li').addClass('active').siblings().removeClass('active');
        }
    });