JQuery와 탭 내가 탭 내부의 버튼을 클릭하면 탭

Question

내부 버튼을 클릭 한 후 탭을 다시 탭로드이며 첫 번째 탭으로 돌아갑니다 .. 이 그림은 분명히 일을 할 것입니다 :

예를 들어 REDSEA를 클릭하면 선택된 아시아 탭이 변경되어 첫 번째 아프리카로 돌아갑니다. 버튼을 클릭하면 REDSEA가 선택된 탭 안쪽에 있습니다.

이

메신저 사용하여 코드 :

<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> 

당신은 자바 스크립트 코드

을 변경해야

Answer 2

크롬, IE 및 사파리로 구현 및 테스트 한 다른 솔루션이 있습니다.

"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'); 
     } 
    });