javascript - 自定义选项卡点击时跳转到顶部

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.

}