JQuery.load help

Question

I have a page whose contents are already inside the tab, and you do not want to use the tab inside the tab. There will be 4 years 2010, 2009, 2008, 2007, which are the anchors at the top of the #content div. When you click the year, it should load specific content using the jQuery ajax download function into the div # content. It is easy enough. Is it possible to make a click function that will hide what is currently visible and display the corresponding content?

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

I assume I am asking if it is possible to hide something that is currently in the #content div and show the corresponding div? Would it be better if the content was external or hidden when the site loaded?

THX

Answer 1

No, you are on the right track.

Assuming you have 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 the contents of the 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.
    });
});

Answer 2

I would give the tabs a class .activeand set the name (say 2010?) Attribute .

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

Then we have a CSS mapping for .active, which indicates visibility, otherwise .tabthere is display: none;.