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

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

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 2

好吧，如果你的面板具有与导航相同的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 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;

    };
});

更高效的导航效果

3 个答案: