Jquery Tabbar navigation

Question

I've got an almost working JQuery tabbar navigation.

These are my problems: 1. When loading the page, no article is visible. 2. When I click another tabbar item than the first time, the first article doesn't hide.

This is all i have for now: http://jsfiddle.net/ZPuNA/

Jquery script

$(function() {
$("nav a.non_active").click(function(event){

    $("a.active").removeClass("active");
    $(this).toggleClass("active");

    var article = "article." + event.target.id;

    $(article).css({"display": "block"});

return false;
});

});

html code

<section>
    <nav>
        <ul>
            <li><a href="#tab_1" class="non_active active" id="tab_1">Tab 1</a></li>
            <li><a href="#tab_2" class="non_active"  id="tab_2">Tab 2</a></li> 
            <li><a href="#tab_3" class="non_active"  id="tab_3">Tab 3</a></li> 
        </ul>
    </nav>
    <article class="tab_1">This is tab 1.</article>
    <article class="tab_2">More content in tab 2.</article>
    <article class="tab_3">Tab 3 is always last!</article>
</section>

Answer 1

Here is a working code: http://jsfiddle.net/ZPuNA/3/

jQuery(document).ready(function($) {
    $("article").hide();
    var currentDiv = $(".active").attr("ID");
    $("article."+currentDiv).show();
    $("nav a.non_active").click(function(event){
        $("a.non_active").removeClass("active");
        $(this).toggleClass("active");

        var article = "article." + event.target.id;
        $("article").hide();
        $(article).show();

    return false;
    });
});

I put it in a document ready event. And start with hiding all articles. On click then just toggle the active class and show article with correct class.