Show one div while hiding other divs with jquery when clicking on links

Question

I am trying to create a navigation scheme that has a series of links and number of divs. When I click on link 1 I want to show div 1. If I click on link 2 I want to hide 1 and show 2 etc.

I was able to get the following code to work. However, what is happening is when any other link on the page is clicked the div that is currently being displayed disappears/hides.

I have tried various solutions but have been unable to figure this out. Can someone provide some insights to what may be happening based on the code below.

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');
});

Answer 1

$('a') targets every <a> tag in page, you need more specific selector:

$("#navigation a');

Answer 2

$("#navigation a").on(...

that's it really so to bind the click event only to your navigation links; your code is binding this event to all links that it will find in the document body so you just need a more precise selector

nb: you should delegate

Answer 3

Example: http://jsfiddle.net/9UPQj/

<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" rel="1"><img src="images/templates/thumbs/property84.jpg" width="143" height="194" />1st</div>
    <div id="openhouse" class="span-18 last" rel="2"><img src="images/templates/thumbs/property84.jpg" width="143" height="194" />2nd</div>
    <div id="Postcards" class="span-18 last" rel="3"><img src="images/templates/thumbs/property84.jpg" width="143" height="194" />3rd</div>
    <div id="Mortgage" class="span-18 last" rel="4"><img src="images/templates/thumbs/property84.jpg" width="143" height="194" />4th</div>

JS:

$('#navigation a').on('click', function(e) {
    e.preventDefault();
    var index = $('a').index(this) + 1;

    $('div').each(function(){

        if($(this).attr('rel') == index){
            $(this).addClass('active');
            $(this).show();
        }else{
            $(this).removeClass('active');
            $(this).hide();
        }
    });

});

Answer 4

Try this

http://jsfiddle.net/6QJJp/1/

I guess this is what you need

you will need to fix CSS according to you requirement.