更高效的導航效果

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; 

    }; 
});