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

    // ...
});

你可以在函数的任何地方调用它（例如，在结尾处）。

从标签控件中删除焦点

1 个答案: