Question

我对jquery以及所有其他形式的网络编程都比较新。

我正在尝试构建主导航。用于将外部页面动态加载到单个div中的菜单，具有一些简单的过渡效果。

到目前为止，一切都运行良好，除非.current类的按钮即使在点击其他项目时仍保持非活动状态。

我希望在点击其他按钮后再次点击活动按钮。因此，当时只有一个具有.current类的非活动项。

我试过.bind .unbind，.on。off，addAttr ......没有结果。

Jquery的：

$(document).ready(function(){

    $('#pageWraper').css({'display':'none'}).slideDown('fast');

    $("a.menuLink").on("click", function(event) {
        var pageLink = $(this).attr('href');

        event.preventDefault();
         $(".currentPage").fadeOut('slow', function(){
             $("#pageWraper").load(pageLink);
         });

         $('#navigationWraper li a').removeClass('current');
         $(this).addClass('current').removeAttr('href').unbind('click');
    });
});

工作示例：

http://jsfiddle.net/gundra/GW8mb/1/

希望有一个简单的解决方案，感谢

Answer 1

没有必要取消绑定，你只需要在做任何事情之前检查current课程

http://jsfiddle.net/GW8mb/5/

$(document).ready(function () {

    $('#pageWraper').css({
        'display': 'none'
    }).slideDown('fast');

    $("a.menuLink").on("click", function (event) {
        event.preventDefault();
        var $this = $(this);
        if (!$this.hasClass('current')) {
            var pageLink = $this.attr('href');

            $(".currentPage").fadeOut('slow', function () {
                $("#pageWraper").load(pageLink);
            });

            $('#navigationWraper li a').removeClass('current');
            $this.addClass('current');
        }
    });

});

Answer 2

这是你想要做的吗？只需突出显示活动菜单项？

http://jsfiddle.net/GW8mb/3/

从那里只需使用pageLink var将任何内容加载到容器div中。

$('#navigationWraper li a').removeClass('current');
     $(this).addClass('current');

在解除绑定后，如何将click事件绑定到元素？

2 个答案: