Help with jQuery .load

Question

I have a page that's content is already inside a tab, and don't want to use a tab inside a tab. There will be 4 years 2010, 2009, 2008, 2007 that are anchors across the top of the #content div. When you click a year, it should load the specific content via jQuery's ajax load functionality into the div#content. That is easy enough. Is it possible to make a click function that will hide whatever is currently visible and display the appropriate content?

 $("a#foo").click(function(){
    $("#Year10").load("2010.php #content");
    $("#Year09, #Year08, #Year07").hide();
  });

I guess what I'm asking is it possible to make it hide anything that currently is in the #content div and show the appropriate div? Would this be better with the content being external pages or div's that are hidden on load?

thx

Answer 1

I would give the tabs an .active class and specify the name (say 2010?) attribute.

$(".tab").click(function () {
    $(".active").removeClass("active");
    $(this).addClass("active");
    $(this).load($(this).attr("name") + ".php");
});

Then have a CSS mapping for .active that indicates visible, otherwise .tab is display: none;.

Answer 2

Nope, you're on the right track.

Assuming you had links like these

<ul id="menu">
    <li><a href="2010.php">2010</a></li>
    <li><a href="2009.php">2009</a></li>
    <li><a href="2008.php">2008</a></li>
</ul>

And a content div

<div id="content"></div>

You just need to write a simple jQuery function.

$("#ul#menu li a").click(function(e) {
    // Prevent going to the page
    e.preventDefault();

    // store the parent (li)
    var $parent = $(this).parent();

    // add class of selected on parent li, and remove it from any other elements
    $parent.addClass("selected").siblings().removeClass("selected");

    // get href
    var href = $(this).attr('href');

    $("#content").load(href + " #content", function() {
        // do something after content is loaded.
    });
});