How can I avoid the repetitive code in this jQuery

Question

I am making a site and this code lets me have several pages in 1 .html file. Can the iterative-ness of this code be avoided? Can it be simplified?

<script type="text/javascript">
        var x = 300;
        $(function() { 
            $("#indexLink").click(function() { 
                $("#content>div").not("#start").hide(x);
                $("#index").show(x);
                $('nav>ul>li').removeClass('active');
                $('#indexLink').addClass('active');
            });

            $("#leerlingLink").click(function() { 
                $("#content>div").not("#start").hide(x); 
                $("#leerling").show(x); 
                $('nav>ul>li').removeClass('active');
                $('#leerlingLink').addClass('active');
            });

            $("#bestemmingLink").click(function() { 
                $("#content>div").not("#start").hide(x); 
                $("#bestemming").show(x);
                $('nav>ul>li').removeClass('active');
                $('#bestemmingLink').addClass('active');
            });

            $("#betalingLink").click(function() { 
                $("#content>div").not("#start").hide(x); 
                $("#betaling").show(x);
                $('nav>ul>li').removeClass('active');
                $('#betalingLink').addClass('active');
            });
        });

</script>

Answer 1

You can use a for loop and construct the selectors:

$(function () {
    var items = ["index", "leerling", "bestemming", "betaling"];
    for (var i = 0; i < items.length; i++) {
        var item = items[i];
        $("#" + item + "Link").click(function () {
            $("#content>div").not("#start").hide(x);
            $("#" + item).show(x);
            $('nav>ul>li').removeClass('active');
            $('#' + item + 'Link').addClass('active');
        });
    }
});

You could also add a handler to all #whateverLinks and then detect the link name based on the id value of the event target.

Answer 2

Assuming that the things being clicked are something other than anchor links you could give the elements all the same class and write this once -

EDIT: made a change based on the information that these are anchor links.

$('.classname').click(function(event) {
    event.preventDefault(); 
    $("#content>div").not("#start").hide(x);
    var idString = this.id
    var shortIDString = idString.slice(0,-4); //remove the 'Link'
    $("#" + shortIDString).show(x);
    $('nav>ul>li').removeClass('active');
    $(this).addClass('active');
});

Answer 3

what do you mean by iterative-ness ?

if you want your code to be DRY you could just write somthing like this:

<script type="text/javascript">
    var x = 300;
    $(function () {
        $("#indexLink,#betalingLink,#bestemmingLink,#leerlingLink").click(function () {
            $("#content>div").not("#start").hide(x);
            $("#"+$(this).attr("id").slice(0,-4)).show(x);
            $('nav>ul>li').removeClass('active');
            $('#indexLink').addClass('active');
        });
    });
</script>

this will take all selectors, one at the time, and make all of them run that code of yours, basically the same as you typed, but in one selector only

EDIT

Fixed div showing

EDIT2

added jsfiddle to show it working: http://jsfiddle.net/NicosKaralis/Vurjf/