Question

我正在创建一些jquery选项卡，每当我点击它时，它总是滚动到顶部，

这是我的HTML，

<div id="my_div">
    <ul>
       <li><a href="#tab_1">Tab-1</a></li>
       <li><a href="#tab_2">Tab-2</a></li>
       <li><a href="#tab_3">Tab-1</a></li>
    </ul>
</div>

到目前为止我试过了，

$('#my_div a').click(function(e) {
 e.preventDefault();
});

它没有帮助，我在这里做错了什么。请帮忙！

修改

<div id="tab_1" class="tab-content">
    <p>tab 1 goes here..</p>
</div>
<div id="tab_2" class="tab-content">
    <p>tab 2 goes here..</p>
</div>

$(document).ready(function(e) {
    $('#my_div').createTabs();
});

Answer 1

我不确定jQuery在幕后做了什么，但是浏览器行为正在进行中，所以当你有一个带有＃的href时，它会滚动到该页面上的元素，其id与＃匹配。 / p>

也许试试：

$('#my_div a').click(function(e) {
    return false;
});

Answer 2

尝试将代码包装在doc ready块中：

$(function(){ // doc ready starts
   $('#my_div').on('click', 'a', function(e) {
     e.preventDefault();
   });
});// doc ready ends

使用事件委托语法。

单击选项卡上的停止页面滚动

2 个答案: