How to prevent auto scrolling when click tab

Question

I'm working on a project and stuck on the tabs. No matter what I do the page scrolling down when I click a tab. This is my 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 ;
        });
    });
};

And the style of .active-panel is display: block. I tried to use:

e.preventDefault();

or

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

and other stuff I found on the web but nope, not working.

Did the `alert()` appear in your last JS example? In theory, that should have worked. — Rory McCrossan, Jan 05 '16 at 10:48

Baro · Answer 1 · 2016-01-05T11:33:04.467

1

UPDATE Try to add a return false into the click event and as suggest Diego change the hash method (but work only in a newer browser) like this:

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

edited Jan 05 '16 at 11:33

answered Jan 05 '16 at 10:55

Baro

5,300
2
17
39

Tried that too, and still... :\ – Moran Jan 05 '16 at 11:55
You can link the real page ? – Baro Jan 05 '16 at 12:14
here [WebApp-Project](https://github.com/moransh4/WebApp) - i update and now it's work thanks to Ali. but i need the hash of the tabs to show at the URL. you have a solution to that? – Moran Jan 05 '16 at 14:35

score 1 · Answer 2 · edited May 23 '17 at 11:45

1

I think that it's scrolling when you are setting the hash here

 window.location.hash = target_panel_selector ;

Take a look at: https://stackoverflow.com/a/14690177/5612557

edited May 23 '17 at 11:45

Community

1
1

answered Jan 05 '16 at 11:02

Diego Grasso

21
3

AsgarAli · Accepted Answer · 2016-01-06T08:54:08.320

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

This good for save selected tab . but the hash not change. and when i click the 'a' in the 'li' the page scrolling. — Moran, Jan 05 '16 at 12:05
Wow thanks!!! vary close to perfect!!! but the hash not changes , now i see just #javascript:void(0) — Moran, Jan 05 '16 at 12:47
Gladly , but i need to earn 15 reputation at least. how can i change the hash to the tab i clicked like #quick_reports on the first tab , instead of showing me #javascript:void(0) ?and you'r solution will still working ... — Moran, Jan 05 '16 at 13:05
I upload to github - [WebApp - Project](https://github.com/moransh4/WebApp) at js/tabs.js — Moran, Jan 05 '16 at 14:15
Exactly. i update in tabs.js what you wrote to me . just to add this data-href to the URL . i use this : window.location.hash = "/"+target_panel_selector.slice(1); but you have a better solution ? — Moran, Jan 05 '16 at 17:22

score -1 · Answer 4 · answered Jan 05 '16 at 10:57

-1

You may try

event.stopPropagation();

answered Jan 05 '16 at 10:57

Yaroslav Grishajev

2,127
17
22

How to prevent auto scrolling when click tab

4 Answers4