Более эффективные Nav Effects

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. Я уверен, что у меня просто есть глупый момент. Благодаря!

EDIT: Я структурирую код по-разному в том, как он обрабатывает коммутаторы панели, и этот раздел кода предназначен только для обработки переходов 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

Немного беспорядочно, но в два раза короче и wo/повторяющиеся части, подверженные ошибкам.

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> 

А потом сделать это с помощью скрипта (EDIT пропустил тот факт, что ваш заголовок анимация была только для о, так изменился что ниже):

$('#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; 

    }; 
});