如何防止页面跳转显示当顶部或隐藏元素使用jQuery褪色选项(How to prevent a pa

有这个很多问题，我曾尝试他们。

我所试图做的

我使用jQuery淡入淡出，并选择隐藏的div并使用下面的jQuery的显示列表，但页面跳转一直到顶部。将显示列表是动态的。

我试图与e.preventDefault(); 并return false; 但是没有用的。

我试图改变锚标签跨越标签，但随后第二onClick功能不起作用。

这是因为我的内容长度是动态的，这使得它看起来像一个跳还是一个真正的跳跃？

提前致谢。

HTML

<div id="action_bar">
    <div id="cart"><i class="fa fa-shopping-cart" aria-hidden="true"></i><div class="total">20</div></div>
    <a href="" id="nav">CATEGORIES</a>
    <div id="filter"><i class="fa fa-filter" aria-hidden="true"></i><div class="total">1</div></div>
</div>

<div id="content">
    <div id="category1" class="category" data-categories="SPL">
        <img src="images/c_w.png"><div class="category_description">Chef's Special</div>
    </div>

    <div id="category2" class="category" data-categories="LCH">
        <img src="images/l_w.png"><div class="category_description">Lunch</div>
    </div>

    <div id="category3" class="category" data-categories="SNK">
        <img src="images/s_w.png"><div class="category_description">Snacks</div>
    </div>

    <div id="category4" class="category" data-categories="DNR">
        <img src="images/d_w.png"><div class="category_description">Dinner</div>
    </div>
    <ul class="items">
        <!-- Menu List -->
    </ul>
</div>

<script type="text/javascript">
$(document).ready(function(){
    $('body').on('click', '.category', function(){
        var category = $(this).data('categories');
        //alert(category);
        $('.category').fadeOut(300);
        $.ajax({
               type: "POST",
               url: "./assets/listproducts.php",
               data: {cat: category},
               cache: false,
               success: function(response){
                   //console.log(response);
                   $('#nav').html('<- BACK').addClass('back');
                   $('.items').html(response).delay(400).fadeIn(300);
               }
        });
    });

    $('.back').on('click', function(e){
        $('.items').fadeOut(300);
        $('.category').html(response).delay(400).fadeIn(300);
        $('#nav').html('CATEGORIES').removeClass('back');
        e.preventDefault();
    });
});
</script>

CSS

ul.items
{
    padding:0;
    margin:0;
    display:none;
}

Answer 1:

你的第二个.back的onclick从不开火。

它不工作，要么时间（作为a或span ） -当它是一个a ，默认点击就会触发，将带你到顶部。

这是因为，当你调用$('.back').on('click'..)没有一个.back要连接到如你没有添加该类到你的背部按钮元素。

您需要使用事件委托： https://stackoverflow.com/a/1688293/2181514

改变你的活动线达：

$("document").on("click", ".back", function....

然后将拾取动态改变类

Answer 2:

我怀疑，如果你的click事件.back在所有的事件时，必然会因为注册， .back不存在。因此，它的好，因为上的链接点击它没有href 。

您需要委派点击.back的document 。需要这个代表团，因为您要添加的back动态类。

 $(document).on('click','.back', function(e){
        e.preventDefault();
        $('.items').fadeOut(300);
        $('.category').html(response).delay(400).fadeIn(300);
        $('#nav').html('CATEGORIES').removeClass('back');

    });