自定義標籤跳轉到頂部點擊

Question

我有這些標籤沒有問題的工作。每次我點擊每個標籤時頁面移動到頂部。有什麼辦法可以阻止這個嗎？

我已閱讀以前的帖子，我認爲這個問題與<a href="#"有關，所以我刪除了這個。所以現在它使用的是data-tab，但它仍然跳到頂端。

$('ul.tabs__list li').click(function(){ 
    var tab_id = $(this).attr('data-tab'), $ct = $(this).closest('.tabs'); 

    $ct.find('ul.tabs__list li.current').removeClass('current'); 
    $ct.find('.tabs__content.current').removeClass('current'); 

    $(this).addClass('current'); 
    $("#"+tab_id).addClass('current'); 

    $(window).trigger('resize'); 
}); 

HTML

<div class="tabs tabs--hero"> 

     <div class="container"> 

      <ul class="tabs__list clear"> 
       <li class="tabs__list--item ademi caps align-center current" data-tab="panel-1"> 
        Containment strategy 
       </li> 
       <li class="tabs__list--item ademi caps align-center" data-tab="panel-2"> 
        Aseptic Systems 
       </li> 
       <li class="tabs__list--item ademi caps align-center" data-tab="panel-3"> 
        Standard Systems 
       </li> 
       <li class="tabs__list--item ademi caps align-center" data-tab="panel-4"> 
        Mobile Clean Rooms 
       </li> 
       <li class="tabs__list--item ademi caps align-center" data-tab="panel-5"> 
        Spare Parts 
       </li> 
      </ul> 

     </div> 

     <div class="section background--white"> 

      <div class="container"> 

       <div id="panel-1" class="tabs__content current"> 

        <div class="group"> 

         <div class="col4"> 
          <div class="feature"> 
           <h2 class="ademi delta primary caps line line__left line--secondary">Restricted Access Barrier Systems (RABS)</h2> 

           <p class="beta beta--leading">Our innovative RABS provide protection by delivering a physical and aerodynamic barrier over a critical process zone with easier access to the process in the event when intervention is required and can be used for many applications in a fill finish area.</p> 

           <a href="#" class="btn btn--secondary">View Products<i class="icon icon-rounded-arrow-pointing-to-the-right beta"></i></a> 
          </div> 
         </div> 

         <div class="col8"> 
          <div class="feature__slider"> 
           <ul class="slideshow"> 
            <li> 
             <div> 
              <img src="/assets/img/testing/image-683x491px.jpg" alt="testing" /> 
              <p class="slideshow__caption alpha">Designed to provide an ergonomic and practical alternative <a href="#">More Details</a></p> 
              <p class="vertical-text slideshow__vertical-text alpha caps">Cell Therapy</p> 
             </div> 
            </li> 
            <li> 
             <div> 
              <img src="/assets/img/testing/image-683x491px.jpg" alt="testing" /> 
             </div> 
            </li> 
            <li> 
             <div> 
              <img src="/assets/img/testing/image-683x491px.jpg" alt="testing" /> 
             </div> 
            </li> 
            <li> 
             <div> 
              <img src="/assets/img/testing/image-683x491px.jpg" alt="testing" /> 
             </div> 
            </li> 
           </ul> 
          </div> 
         </div> 

        </div> 

       </div> 

       <div id="panel-2" class="tabs__content"> 
        Aseptic Systems content 
       </div> 

       <div id="panel-3" class="tabs__content"> 
        Standard Systems content 
       </div> 

       <div id="panel-4" class="tabs__content"> 
        Mobile Clean Rooms content 
       </div> 

       <div id="panel-5" class="tabs__content"> 
        Spare Parts content 
       </div> 

      </div> 

     </div> 

    </div> 

Answer 1

我覺得你的TAB js代碼沒有問題。只需添加e.preventDefault();即可。

$('ul.tabs__list li').click(function(e){ 
    e.preventDefault(); 
//code goes here. 

} 

Answer 2

的添加到函數的參數e和內部功能寫入e.preventDefault（）;