javascript - 单击选项卡时如何防止自动滚动

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();
});

以及我在网上找到的其他东西，但没有，不起作用。

Answer 1

<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>