如何防止点击选项卡时自动滚动

Question

我正在开发一个项目，但在标签页上遇到了问题。无论我做什么，当我点击一个标签时网页都会向下滚动。这是我的HTML：

<ul class="list">
    <li class="tab1 active">
        <i class="fa fa-external-link"></i> 
        <a href="#quick-reports" class="tab">Quick Reports</a>
    </li>
    <li class="tab1">
        <i class="fa fa-star-o"></i>
        <a href="#my-folders" class="tab">My Folders</a>
    </li>
    <li class="tab1">
        <i class="fa fa-folder-open-o"></i>
        <a href="#my-team-folders" class="tab">My Team Folders</a>
    </li>
    <li class="tab1">
        <i class="fa fa-files-o"></i>
        <a href="#public-folders" class="tab">Public Folders</a>
    </li>
</ul>

var open_tab = function() {
    $('.tab1').each(function (i, tab) {
        UTILS.addEvent(tab, 'click', function() {
            $('.list li.active').removeClass('active');
            $(this).addClass('active');
            $('.active-panel').removeClass('active-panel');

            var target_panel_selector = $(this).find('a').attr('href');
            $(target_panel_selector).addClass('active-panel');
            window.location.hash = target_panel_selector ;
        });
    });
};

.active-panel 的样式是 display: block。我尝试使用以下代码：

e.preventDefault();

或者

tab.find('a').on('click', function(e){
    alert("finally!!");
    e.preventDefault();
});

我在网上找到了其他的东西，但是不起作用。

- Moran

---

你上一个JS示例中是否出现了alert()？理论上来说，它应该可以工作。 - Rory McCrossan

不要触发警报。 - Moran

尝试使用 $(tab).find('a').... - Rory McCrossan

Answer 1

更新 尝试在点击事件中添加return false，并像Diego建议的那样更改哈希方法（但仅适用于较新的浏览器），如下所示：

var open_tab = function() {
    $('.tab1').each(function (i, tab) {
        UTILS.addEvent(tab, 'click', function() {
            $('.list li.active').removeClass('active');
            $(this).addClass('active');
            $('.active-panel').removeClass('active-panel');

            var target_panel_selector = $(this).find('a').attr('href');
            $(target_panel_selector).addClass('active-panel');
            //window.location.hash = target_panel_selector ;
            if(history.pushState) {
                history.pushState(null, null, target_panel_selector);
            } else {
                window.location.hash = target_panel_selector;
            }
            return false; // <-- add this line
        });
    });
};

- Baro

---

也试过那个方法，但还是不行... :\ - Moran

你能提供真实页面的链接吗？ - Baro

这里是一个 WebApp 项目（https://github.com/moransh4/WebApp），我进行了更新，现在它能够正常工作了，多亏了 Ali。但是我需要将选项卡的哈希值显示在 URL 中，你有解决方案吗？ - Moran

Answer 2

我认为在此处设置哈希时会发生滚动。

 window.location.hash = target_panel_selector ;

请看：https://dev59.com/3W865IYBdhLWcg3wU8-I#14690177

- Diego Grasso

Answer 3

<ul class="list">
    <li class="tab1 active">
        <i class="fa fa-external-link"></i>
        <a data-href="#quick-reports" class="tab" href="javascript:void(0)">Quick Reports</a>
    </li>
    <li class="tab1">
        <i class="fa fa-star-o"></i>
        <a data-href="#my-folders" class="tab" href="javascript:void(0)">My Folders</a>
    </li>
    <li class="tab1">
        <i class="fa fa-folder-open-o"></i>
        <a data-href="#my-team-folders" class="tab" href="javascript:void(0)">My Team Folders</a>
    </li>
    <li class="tab1">
        <i class="fa fa-files-o"></i>
        <a data-href="#public-folders" class="tab" href="javascript:void(0)">Public Folders</a>
    </li>
</ul>

<script>
    function maketabActive($strElement)
    {
        $('.list li.active').removeClass('active');
        $strElement.addClass('active');
        $('.active-panel').removeClass('active-panel');

        var target_panel_selector = $strElement.find('a').data('href');
        $(target_panel_selector).addClass('active-panel');
        // Save selected tab index in session stroage.So after page refresh active tab will be maintained
        sessionStorage.setItem('selected-tab', $strElement.index());
    }
    $(document).ready(function () {
        // Check if selected tab is stored in session stroage
        if (sessionStorage.getItem('selected-tab'))
        {
            //Make tab active based on index got from session stroage
            maketabActive($(".tab1:eq(" + sessionStorage.getItem('selected-tab') + ")"));
        }
    });
    var open_tab = function () {
        $('.tab1').each(function (i, tab) {
            UTILS.addEvent(tab, 'click', function () {
                maketabActive($(this));
            });
        });
    };
</script>

- AsgarAli

---

这对于保存所选标签非常有用。但是哈希值没有更改。当我单击“li”中的“a”时，页面会滚动。 - Moran

哇，谢谢！！！非常接近完美！！！但是哈希值没有改变，现在我只看到 #javascript:void(0)。 - Moran

很高兴为您翻译，但我至少需要赚取15个声望。如何将哈希更改为我点击的选项卡，例如第一个选项卡上的#quick_reports，而不是显示#javascript:void(0)？您的解决方案仍将继续工作... - Moran

我上传了 WebApp - Project 的 js/tabs.js 文件到 Github。 - Moran

没错。我在tabs.js中更新了你给我的代码，只是为了将data-href添加到URL中。 我使用了这个：window.location.hash = "/"+target_panel_selector.slice(1); 但你有更好的解决方案吗？ - Moran

Answer 4

你可以尝试一下

event.stopPropagation();

- Yaroslav Grishajev