Question

我正在尝试创建一个动态的单页网站。我正在尝试使用jQuery隐藏并在单击菜单项时显示不同的div。当您按下属于您已经使用的页面的菜单按钮时，我试图阻止淡入淡出效果再次发生，但我似乎无法弄清楚我是如何做到的。

<nav>             
    <ul>
        <li><a id="main" href="#" class="selected">My Work</a></li>
        <li><a id="about" href="#">About Me</a></li>
        <li><a id="contact" href="#">Contact</a></li>           
    </ul> 
</nav><!-- end navigation menu -->

<section class="main content"> </section>          
<section class="about content"> </section> <!-- End about -->
<section class="contact content">  </section> <!-- End contact -->

Jquery的

$(document).ready(function(){

    $("nav ul li a").click(function(){
        var cls = $(this).attr('id');
        $(".content").fadeOut(100);
        $('.' + cls).delay(100).fadeIn(100);
        return false;
    });

});

我对jQuery并不擅长。当我点击右侧链接时，我也想知道如何更改所选标签。

Answer 1

在jquery中使用回调和preventDefault

$("nav ul li a").click(function(event){

        event.preventDefault();

        var cls = $(this).attr('id');

        $(".content").fadeOut(100, function() { 
            $('.' + cls).fadeIn(100);
        });

        return false;
    });

Answer 2

试试这个：

$(document).ready(function(){

$("nav ul li a").click(function(){
    if( !$(this).hasClass('selected'){
        var cls = $(this).attr('id');
        $(".content").fadeOut(100);
        $('.' + cls).delay(100).fadeIn(100);
        return false;
    };
});

});

在动作周围添加'if'语句可以防止当'a'具有'selected'类时触发事件 - 即。你已经在那个页面/部分。

阻止事件连续发生两次

2 个答案: