Efficient jQuery navbar?

Question

I'm trying to make a simple navigation bar in HTML/jQuery and have managed to make a working implementation. Each tab is supposed to, when clicked, display the appropriate content section. (NOTE: all 's are display = none by default. the "active" class sets this value to "block")

I've been doing a bit of reading about efficiency concerns with Javascript and jQuery and really want to start making it a good habit of writing efficient code from the beginning as opposed to always having to come back to everything.

Is there a more efficient way of doing what the code I have below does? I know that constant calls to the DOM can be expensive, but I'm not entirely sure if I can change that in this scenario.

Any advice regarding how this example could be better would be great. General performance tips for jQuery/Javascript would also be greatly appreciated!

index.html

<div id="container">
    <nav>
        <a href="#" data-content="home">Home</a>
        <a href="#" data-content="about">About</a>
        <a href="#" data-content="careers">Careers</a>
        <a href="#" data-content="contact">Contact</a>
        <a href="#" data-content="lasers">Lasers</a>
    </nav>
    <section id="home" class="active">
        This is the home section!
    </section>
    <section id="about">
        This is the about section!
    </section>
    <section id="careers">
        This is the careers section!
    </section>
    <section id="contact">
        This is the contact section!
    </section>
    <section id="lasers">
        This is the lasers section!
    </section>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="./app.js"></script>

app.js

$(document).ready(function() {
    $('a').click(function() {
        var view = $(this).data("content");
        var curr = $("#"+view).attr("class");
        if (curr !== "active") {
            $(".active").toggleClass("active");
            $("#"+view).toggleClass("active");
        }
        event.preventDefault();
    })
});

Answer 1

What about

$(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();
    })
});

Answer 2

I would do something like this:

var section = $("section");

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

Less code + you're caching your sections.

Demo here:

http://jsfiddle.net/a75p8/

Answer 3

I think you're doing too much work with the data-content. How about something like this?

$(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
});