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

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>

Answer 2

UPDATE尝试在click事件中添加返回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
        });
    });
};

Answer 3

我认为当你在这里设置哈希的时候它在滚动

 window.location.hash = target_panel_selector ;

看看：https://stackoverflow.com/a/14690177/5612557