如何使用ID名称作为URL使用jquery加载页面

Question

how can i tell jquery to use the <a id=""> or <a href=""> as a URL to load on click? For example URL page1.php. either by getting the href, or by getting the id and then appending .php

html

<a id="page1" class="load" href="page1.php">1</a>
<a id="page2" class="load" href="page2.php">2</a>
<a id="page3" class="load" href="page3.php">3</a>

jquery

<script>
    $(document).ready(function () {  
        $(".load").click(loadDynamic);  
    });  
    function loadDynamic() {  
        $("#load_in")  
            .load("",function (content) {  
                $(this).hide().fadeIn("slow");  
                return false;  
        }); 
    }  
</script>

Answer 1

Use this.href to get the href .

$(document).ready(function() {
    $(".load").click(loadDynamic);
});

function loadDynamic() {
    $("#load_in").load(this.href, function(content) {
        $(this).hide().fadeIn("slow");
    });
        return false;
}​

Of course you can use this.id + ".php" as well.

Note that you wrote return false inside the load callback thus it won't prevent the default anchor click! You should move it to the outer scope like in the answer.

---

For those of you complaining about .click(fn) against on('click', fn)

Those are the same function , .click(fn) is an alias for on('click', fn) :

In the first two variations, this method is a shortcut for .bind("click", handler), as well as for .on("click", handler) as of jQuery 1.7.

jQuery docs

Answer 2

You can use this.href :

$(".load").click(function() {
    $("#load_in").load(this.href, function() {
        $(this).hide().fadeIn("slow");
    });
    return false;
});

To get ID use simple this.id .

Answer 3

Replace

.load("",function (content) {

With

.load(this.href, function (content) {