javascript - 从选项卡控件中移除焦点

Question

我的页面上有一个带有两个选项卡的选项卡控件。当我单击第二个选项卡时，页面向下滚动到选项卡控件。我不想将注意力集中在选项卡控件上并保持页面所在的位置。我知道这是由于 href 上的<li>但如果我删除 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函数。这将阻止浏览器跟踪该链接。

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

    // ...
});

您可以在函数中的任何位置调用它（例如，在末尾）。