更高效的导航效果

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/

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

Answer 2

有点混乱，但两倍的短和窝/重复容易出错的部分。

var pages = [ 
    { title: 'about', 
     showPanel: aboutPanel, 
     dontHidePanels: [photoPanel, resumePanel], 
     extracode: function() { 
      notworkOn = false; 
      arrange(); 
      $('#header .inner').animate({ 
       width: '100%' 
      }, 600); 
     } 
    }, 
    { title: 'protfolio', 
     showPanel: horizon, 
     dontHidePanels: [resumePanel], 
     extracode: function() { 
      arrange() 
      notworkOn = false; 
     } 
    }, 
    { title: 'resume', 
     showPanel: resumePanel, 
     dontHidePanels: [servicesPanel], 
     extracode: function() { 
      notworkOn = false; 
     } 
    }, 
    { title: 'photo', 
     showPanel: photoPanel, 
     dontHidePanels: [resumePanel], 
     extracode: function() { 
      notworkOn = false; 
     } 
    } 
]; 

var panels = [ aboutPanel, horizon, photoPanel, resumePanel, servicesPanel]; 

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

    var curPageTitle = this.id.match(/(\w+)Btn/)[1]; 
    var p = null; 
    for (var i = 0; i < pages.length; i++) { 
     if (pages[i].title == curPageTitle) { 
      $('#' + pages[i].title + 'Btn') 
       .removeClass(pages[i].title + 'Active') 
       .addClass(pages[i].title); 
      p = pages[i]; 
     } else { 
      $('#' + pages[i].title + 'Btn') 
       .removeClass(pages[i].title) 
       .addClass(pages[i].title + 'Active'); 
     } 
    } 
    for (var i = 0; i < panels.length; p++) { 
     if (panels[i] == p.showPanel) { 
      panels[i].css('display', 'block'); 
     } else if ($.inArray(panels[i], p.dontHidePanels) != -1) { 
      panels[i].css('display','none'); 
     } 
    } 
    p.extracode(); 
}); 

Answer 3

我会改变你的类结构，使用一个单独的active类：

<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="about active" href="index.html" id="aboutBtn">About Me</a> 
</div> 

然后用脚本（编辑为此错过了一个事实，即你的头动画是只为一下，这样改下面）：

$('#nav a').on('click', function(e) { 
    var $this = $(this); 

    e.preventDefault(); 

    //Toggle active 
    $this.parent().find('.active').toggleClass('active'); 
    $this.toggleClass('active'); 

    //Hide All Panals 
    horizon.css('display','none'); 
    aboutPanel.css('display','none'); 
    photoPanel.css('display', 'none'); 
    resumePanel.css('display', 'none'); 

    //Show Correct Panel 
    switch($this.id){ 
    case 'resumeBtn': 
     resumePanel.css('display', 'block'); 
    break; 
    case 'portfolioBtn': 
     horizon.css('display','block'); 
    break; 
    case 'photoBtn': 
     photoPanel.css('display','block'); 
     arrange(); 
    break; 
    case 'aboutBtn': 
     aboutPanel.css('display','block'); 
     arrange(); 
     $('#header .inner').animate({ 
      width: '100%' 
     },600); 
    break; 
    } 
    notworkOn = false; 

    }; 
});