Как предотвратить автоматическую прокрутку при нажатии вкладки

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 Попробуйте добавить возвращение ложного в событие щелчка и, как предполагает, Диего изменить метод хеширования (но работает только в новом браузере), как это:

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

Вы можете попробовать

event.stopPropagation();

Answer 4

Я думаю, что это прокрутки, когда вы устанавливаете хэш здесь

window.location.hash = target_panel_selector ; 

Взгляните: https://stackoverflow.com/a/14690177/5612557