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 a

Answer 1

$("#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 2

Try this

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

I guess this is what you need

you will need to fix CSS according to you requirement.

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

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

$("#navigation a');