jquery - 标签导航问题

Question

当我向下滚动到选项卡并选择其中一个选项卡时，我的页面末尾有选项卡，它会将我带到页面顶部，选项卡工作正常，但我想在单击时留在页面的同一部分我不想每次都上到顶部的选项卡。这是我的 jquery 选项卡代码：

<div id="wrapper">
 <ul class="tabs">
   <li id="fixtures_tab"><a href="#fixtures"><?php echo ALL;?></a></li>
   <li id="live_tab"><a href="#live"><?php echo LIVE;?></a></li>
   <li id="finished_tab"><a href="#finished"><?php echo FINISHED;?></a></li>
   <li id="program_tab"><a href="#program"><?php echo PROGRAM;?></a></li>
   <li id="postpond_tab"><a href="#postpond"><?php echo POSTPOND;?></a></li>
   <li id="selected_tab"><a onclick="stripe_Color();" id='f' href="#fav"><?php echo SELECTED;?> (0)</a></li>
 </ul>
 <div class="tab-container">
 <div id="fixtures" class="tab-content">
     <script type="text/javascript">get_All_Today_Matches();</script>
 </div>
 <div id="live" class="tab-content"><script type="text/javascript"></script></div>
 <div id="finished" class="tab-content"><script type="text/javascript"></script></div>
 <div id="program" class="tab-content"><script type="text/javascript"></script></div>
 <div id="postpond" class="tab-content"><script type="text/javascript"></script></div>
 <div id="fav" class="tab-content"><script type="text/javascript"></script></div>
</div>

Answer 1

跳转是由锚标签默认操作引起的。您可以使用 jquery 绑定到<a/>标签并防止在单击时执行默认操作。这是通过将事件传递给事件处理程序并preventDefault从处理程序内调用事件的函数来完成的。

$(document).ready(function(){
    $(".tabs a").click(function(e){
       e.preventDefault();
    });
});

工作示例 http://jsfiddle.net/pDcHg/

防止默认文档

Answer 2

使用 preventDefault()..

它防止<a>标签的默认行为

$(".tabs li a").click(function(e){
  e.preventDefault();
});