标签导航问题

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/

preventDefault文档

Answer 2

使用preventDefault() ..

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

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