javascript - 更高效的导航效果

Question

我只需要知道是否有更有效的方法来编写此代码块以实现导航菜单上的过渡效果。如果您想知道为什么我不单独应用每个类，它使用的是 ajax 转换。

这是javascript代码:

var navA = $('#nav a'),
    aboutBtn = $('#aboutBtn'),
    portfolioBtn = $('#portfolioBtn'),
    resumeBtn = $('#resumeBtn'),
    photoBtn = $('#photoBtn');

navA.on('click', function(e) {
    var $this = $(this);

    e.preventDefault();

    // if the resumeBtn is clicked
    if ($this.attr('id') == 'resumeBtn') {

        // Portfolio
        portfolioBtn.removeClass('portfolioActive');
        portfolioBtn.addClass('portfolio');

        //About Me
        aboutBtn.removeClass('aboutActive');
        aboutBtn.addClass('about');

        // Photo
        photoBtn.removeClass('photoActive');
        photoBtn.addClass('photo');

        // Resume
        resumeBtn.removeClass('resume');
        resumeBtn.addClass('resumeActive');
    }
    // If portfolioBtn Is Clicked
    else if ($this.attr('id') == 'portfolioBtn') {

        // About
        aboutBtn.removeClass('aboutActive');
        aboutBtn.addClass('about');

        // Resmue
        resumeBtn.removeClass('resumeActive');
        resumeBtn.addClass('resume');

        // Photo
        photoBtn.removeClass('photoActive');
        photoBtn.addClass('photo');

        // Portfolio
        portfolioBtn.removeClass('portfolio');
        portfolioBtn.addClass('portfolioActive');
    }
    // If photoBtn Is Clicked
    else if($this.attr('id') == 'photoBtn') {

        // About
        aboutBtn.removeClass('aboutActive');
        aboutBtn.addClass('about');

        // Portfolio
        portfolioBtn.removeClass('portfolioActive');
        portfolioBtn.addClass('portfolio');

        // Resume
        resumeBtn.removeClass('resumeActive');
        resumeBtn.addClass('resume');

        // Photo
        photoBtn.removeClass('photo');
        photoBtn.addClass('photoActive');
    } 
    // If aboutBtn is clicked
    else if ($this.attr('id') == 'aboutBtn') {

        // Portfolio
        portfolioBtn.removeClass('portfolioActive');
        portfolioBtn.addClass('portfolio');

        // About Me
        aboutBtn.removeClass('about');
        aboutBtn.addClass('aboutActive');

        // Resume
        resumeBtn.removeClass('resumeActive');
        resumeBtn.addClass('resume');
        // Photo
        photoBtn.removeClass('photoActive');
        photoBtn.addClass('photo');
    };
});

HTML:

<div id="nav">
    <a class="resume" href="resume.html" id="resumeBtn">Resume</a>
    <a class="portfolio" href="portfolio.html" id="portfolioBtn">Portfolio</a>
    <a class="photo" href="photos2.html" id="photoBtn">Photos</a>
    <a class="aboutActive" href="index.html" id="aboutBtn">About Me</a>
</div>

CSS 类使用图像进行过渡，但无论哪种方式。我只是想知道是否有更有效的方法来编写我的 jQuery。我确定我只是有一个愚蠢的时刻。谢谢!

编辑: 我在处理面板开关的方式上以不同方式构建代码，这部分代码只是设计用于处理 Nav 转换。

基本上，我删除了每个 IF 语句的底部，因此它只处理导航转换。

Answer 1

好吧，如果您的面板具有与您的导航相同的 HTML 结构，这将起作用:

$('#nav a').on('click', function (e) {
    e.preventDefault();

    //Buttons
    $('#' + this.id).addClass('active').siblings().removeClass('active');
    // Panels    
    $('#' + this.id.slice(0, this.id.lastIndexOf('Btn')) + 'Panel').show().siblings().hide();

    notworkOn = false;
    switch (this.id) {
        case 'portfolioBtn':
            handlePortfolio();
            break;
        case 'aboutBtn':
            handleAbout();
            break;
    }
});

function handlePortfolio() { arrange(); }
function handleAbout() {
    arrange();
    $('#header .inner').animate({ width: '100%' }, 600);
}

假定您的面板 HTML 结构类似于您的按钮，并命名为 resumePanel 等。此处示例:http://jsfiddle.net/9vwYm/1/

编辑:您当前的代码似乎有一些不一致之处，例如单击照片 按钮显示照片面板，然后当您单击关于 时，照片面板不会隐藏。这是故意的吗？