單擊選項卡中的按鈕后，“ jQuery選項卡”重置選項卡

Question

當我單擊選項卡中的按鈕時，該選項卡正在加載，並返回到第一個選項卡。此圖片將使情況變得清晰：

例如，如果我單擊REDSEA，則選定的ASIA選項卡將更改並返回到第一個非洲地區，我需要的是，當我單擊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的瀏覽器。

在選項卡的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');
        }
    });