Question

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

enter image description here

例如，如果我点击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的所有浏览器。

在tab的click事件中，我将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');
        }
    });

单击Tab中的按钮后，Jquery选项卡将重置选项卡

2 个答案: