自定义选项卡在单击时跳到顶部

Custom tabs jumps to the top on click

本文关键字：顶部单击选项自定义更新时间：2023-09-26

我让这些选项卡正常工作。唯一的问题是每次我单击每个选项卡时，页面都会移动到顶部。有什么办法可以阻止这种情况吗？

我已经阅读了以前的帖子，我认为这个问题与拥有<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>

我认为

你的 TAB js 代码没有问题。只需添加e.preventDefault();.

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

添加到函数参数 e 和内部函数写入 e.preventDefault（）;