Javascript 高效的jQuery导航栏？

我试图在HTML/jQuery中创建一个简单的导航栏，并成功地实现了一个有效的实现。单击每个选项卡时，应显示相应的内容部分。（注意：默认情况下，所有显示=无。“活动”类将此值设置为“块”）

我已经读了一些关于Javascript和jQuery的效率问题的书，我真的想开始养成一个好习惯，从一开始就编写高效的代码，而不是总是回到一切

有没有更有效的方法来完成下面的代码？我知道对DOM的常量调用可能会很昂贵，但我不完全确定在这种情况下是否可以改变这一点

任何关于这个例子如何更好的建议都是非常好的。对于jQuery/Javascript的一般性能提示，我们也将不胜感激

index.html 那怎么办

$(document).ready(function () {
    //cache the sections
    var $setions = $('#container > section');
    $('a').click(function () {
        var view = $(this).data("content");
        //cache the target
        var $view = $("#" + view);
        //use hasClass to check whether the target is already active if so do nothing
        if (!$view.hasClass('active')) {
            //remove active class from other sections
            $setions.filter(".active").removeClass("active");
            //add active class to target
            $view.addClass("active");
        }
        event.preventDefault();
    })
});

---

我会这样做：

var section = $("section");

$("nav a").on("click", function () {
    section.removeClass("active");
    $("#" + $(this).data("content")).addClass("active");
});

代码更少+您正在缓存分区

此处演示：

---

我认为您在数据内容方面做的工作太多了。像这样的怎么样

$(document).on('click','nav a',function(){
    $('section').hide();           //or removeClass
    var tmp_div = $(this).index(); // declaring a variable
    $('nav a').eq(tmp_div).show(); // or addClass
});

var section = $("section");

$("nav a").on("click", function () {
    section.removeClass("active");
    $("#" + $(this).data("content")).addClass("active");
});

$(document).on('click','nav a',function(){
    $('section').hide();           //or removeClass
    var tmp_div = $(this).index(); // declaring a variable
    $('nav a').eq(tmp_div).show(); // or addClass
});