Question

i have a jQuery tab with ajax loading.

<script type='text/javascript'>
$(document).ready(function() {
    $("#nav li a").click(function() {

        $("#ajax-content").empty().append("<div id='loading'><img src='{THEME}/images/loading.gif' alt='Loading' /></div>");
        $("#nav li a").removeClass('current');
        $(this).addClass('current');

        $.ajax({ url: this.href, success: function(html) {
            $("#ajax-content").empty().append(html);
            }
    });
    return false;
    });
});
</script>

HTML Code:

<ul id="nav">
  <li><a href="test1.html">Page 1</a></li>
  <li><a href="test2.html">Page 2</a></li>
</ul>
<div id="ajax-content">This is default text, which will be replaced</div>

everything is fine and working well, but i need something else.

i just need to get contents from div with answer ID in test1.html and test2.html.
i dont wanna load all the pages.

in those pages i have a div for my answers, my test1.html page:

<div>Questions</div>
Some Questions

<div id="answers">Some answers</div>

i just need to show and get contents from id=”answers”
how i can do this?

And how i can add fadein effect after contents is loding?

Answer 1

Replace your $.ajax() call with this:

var location = this.href +" #answers";
$("#ajax-content").load(location);

See the jQuery ajax .load() documentation on loading page fragments.

---

Full code:

$(document).ready(function() {
    $("#nav li a").click(function() {

        $("#ajax-content").html("<div id='loading'><img src='{THEME}/images/loading.gif' alt='Loading' /></div>");

        $("#nav li a").removeClass('current');
        $(this).addClass('current');

        var location = this.href +" #answers";
        $("#ajax-content").load(location);

        return false;
    });
});