Ich versuche, ein Navigationsschema zu erstellen, das eine Reihe von Links und die Anzahl der Divs enthält. Wenn ich auf Link 1 klicke, möchte ich Div 1 anzeigen. Wenn ich auf Link 2 klicke, möchte ich 1 ausblenden und 2 anzeigen usw.

Ich konnte den folgenden Code zum Laufen bringen. Es passiert jedoch, wenn auf einen anderen Link auf der Seite geklickt wird und das derzeit angezeigte Div verschwindet / versteckt.

Ich habe verschiedene Lösungen ausprobiert, konnte dies jedoch nicht herausfinden. Kann jemand anhand des nachstehenden Codes einige Einblicke in das Geschehen geben?

HTML:

    <ul id="navigation">
        <li data-tab="property" class="activeitem settingLink active"><a href="#">Property Flyers</a></li>
        <li data-tab="openhouse" class="settingLink"><a href="#">Open House Flyers</a></li>
        <li data-tab="postcards" class="settingLink"><a href="#">Postcards</a></li>
        <li data-tab="mortgage" class="settingLink"><a href="#">Mortgage Flyers</a></li>
        <li data-tab="recruiting" class="settingLink"><a href="#">Recruiting Flyers</a></li>
    </ul>


    <div id="property" class="span-18 last"><img src="images/templates/thumbs/property84.jpg" width="143" height="194" /></div>
    <div id="openhouse" class="span-18 last"><img src="images/templates/thumbs/property84.jpg" width="143" height="194" /></div>
    <div id="Postcards" class="span-18 last"><img src="images/templates/thumbs/property84.jpg" width="143" height="194" /></div>
    <div id="Mortgage" class="span-18 last"><img src="images/templates/thumbs/property84.jpg" width="143" height="194" /></div>
    <div id="Recruiting" class="span-18 last"><img src="images/templates/thumbs/property84.jpg" width="143" height="194" /></div>

JavaScript:

$('a').on('click', function(e) {
    e.preventDefault();
    var $li = $(this).closest('li');

    var tab = $li.data('tab');
    var current = $('.active.settingLink').data('tab');

    $('#' + current).fadeOut('fast', function() {
        //Slide the new div down
        $('#' + tab).fadeIn();
    });

    //Remove active class from current link
    $('.active.settingLink').removeClass('active');

    $li.addClass('active');
});