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 Documentation

Answer 2

使用preventDefault() ..

它会阻止<a>标记

的默认行为

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

标签导航问题

2 个答案: