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

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()；