从标签控件中移除焦点

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> 

的Javascript：

<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(); 

    // ... 
}); 

您可以在函数的任何位置调用该函数（例如，在结尾处）。