javascript - Dynamically change body content - Stack Overflow

admin管理员组

文章数量:1400134

How do I dynamically change the body content of an html page when a link is clicked?

So I have 3 html pages that looks like this:

<li><a id="homeContainer" href="#">Home</a></li>
<li><a id="testContainer" href='#'>test</a></li>
<li><a id="pageContainer" href="#">page</a></li>

My div:

<div id='container'>
  </div> 

The javascript:

$( document ).ready( function() {
        $( '#testContainer' ).click( function() {
            $( '#container' ).load('test.html');
        });

This works fine if i make for all pages a separate function. But how can I make the javascript function taking a page in the load() function instead of hardcoding it?

[Edit]

I dropped my whole page with everything, html, javascript and css here: jsfiddle

How do I dynamically change the body content of an html page when a link is clicked?

So I have 3 html pages that looks like this:

<li><a id="homeContainer" href="#">Home</a></li>
<li><a id="testContainer" href='#'>test</a></li>
<li><a id="pageContainer" href="#">page</a></li>

My div:

<div id='container'>
  </div> 

The javascript:

$( document ).ready( function() {
        $( '#testContainer' ).click( function() {
            $( '#container' ).load('test.html');
        });

This works fine if i make for all pages a separate function. But how can I make the javascript function taking a page in the load() function instead of hardcoding it?

[Edit]

I dropped my whole page with everything, html, javascript and css here: jsfiddle

• javascript
• html
• css
• document-body

Share Improve this question Follow edited May 12, 2012 at 10:21 Yustme asked May 11, 2012 at 17:22 YustmeYustme 6,2652323 gold badges7777 silver badges105105 bronze badges 3

• i have googled, i couldnt find any example. show me what you found stranger – Yustme Commented May 11, 2012 at 17:40
• @j08691, i tried google, i didn't find any example on how to acplish this. – Yustme Commented May 11, 2012 at 17:41
• please explain in detail exactly what you mean – Huangism Commented May 11, 2012 at 18:13

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

I would suggest using jquery to change out your body with something else. Include the jquery code with:

<script src="http://ajax.googleapis./ajax/libs/jquery/1.5/jquery.min.js"></script>

And then do something like this.

<a id='linkThatChangesTheWorld' href=''>Click Me</a>

<script>
$('#linkThatChangesTheWorld').click( function() {
    $('body').html('I want my body this way.');
});
</script>

You can use functions like .prepend() and .append() if you just want to add some html to the body or if you have a specific div that you wish to change address it from its class:

If you have:

<div class='mychange'></div> 

then use:

$('.mychange').append('<h2>Check it out</h2>');

Further, if you want to load from another page, you can use .get().

$.get('myhtmlpage.html', function(data) {
    //do something after getting the result
    $('body').html($(data));
});

try :

HTML

<li><a id="homeContainer" href="home.html">Home</a></li>
<li><a id="testContainer" href='test.html'>test</a></li>
<li><a id="pageContainer" href="page.html">page</a></li>

Javascript

$(document).ready(function()
{
    $( 'li>a[id$="Container"]' ).click(function(event) 
    {
        event.preventDefault();
        var href = $(this).attr('href');
        alert("Loading " + href)
        $('#container').load(href);
        return false;
    });
});

---

Edit

Try out this JSFiddle using JQuery

本文标签： javascriptDynamically change body contentStack Overflow