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.

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.

• javascript
• jquery
• html

• Did the alert() appear in your last JS example? In theory, that should have worked. – Rory McCrossan Commented Jan 5, 2016 at 10:48
• not get to the alert . – Moran Commented Jan 5, 2016 at 11:31
• Try $(tab).find('a').... – Rory McCrossan Commented Jan 5, 2016 at 11:31

4 Answers 4

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

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./a/14690177/5612557

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

You may try

event.stopPropagation();