탭 컨트롤에서 포커스 제거

Question

두 탭이있는 페이지에 탭 컨트롤이 있습니다. 두 번째 탭을 클릭하면 페이지가 탭 컨트롤로 스크롤됩니다. 탭 컨트롤에 초점을 두지 않고 페이지를 유지하고 싶지 않습니다. <li>의 href로 인해 발생한다는 것을 알고 있지만 href를 제거하면 데이터가 표시되지 않습니다.

내 HTML 코드는 다음과 같습니다 :

<div id="tabContainer" class="Container"> 
    <ul class="maintabs"> 
    <li><a href="#tabDescription" class="active">Description</a></li> 
    <li><a href="#tabTerms">Terms</a></li> 
    </ul> 
    <div class="tabDetails"> 
    <div id="tabDescription" class="tabContents"> 
     <div id="divDescription" runat="server"></div>    
    </div> 
    <div id="tabTerms" class="tabContents"> 
     <div id="divterms" runat="server"></div> 
    </div>        
    </div> 
</div> 

자바 스크립트 :

<script type="text/javascript"> 
     $(document).ready(function() { 
      $(".tabContents").hide(); 
      $(".tabContents:first").show(); 

      $("#tabContainer ul li a").click(function() { 

       var activeTab = $(this).attr("href"); 
       $("#tabContainer ul li a").removeClass("active"); 
       $(this).addClass("active"); 
       $(".tabContents").hide(); 
       $(activeTab).show(); 
      }); 
     }); 
</script> 

Answer 1

당신은 발생하는 링크의 기본 동작을 해제해야합니다.

클릭 동작의 경우 첫 번째 인수 인 e (이벤트 용)을 허용하고 JQuery의 preventDefault function을 호출합니다. 그러면 브라우저가 링크를 따라 가지 않게됩니다.

$("#tabContainer ul li a").click(function (e) { 
    // hey browser, don't handle this link--we'll take it from here 
    e.preventDefault(); 

    // ... 
}); 

함수의 어느 위치에서든 (예 : 끝에) 호출 할 수 있습니다.