javascript - 动态改变正文内容

Question

如何在单击链接时动态更改 html 页面的正文内容？

所以我有 3 个 html 页面，如下所示:

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

我的分区:

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

JavaScript:

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

如果我为所有页面创建一个单独的函数，这就可以正常工作。但是我怎样才能让 javascript 函数在 load() 函数中获取一个页面而不是硬编码呢？

[编辑]

我将整个页面的所有内容、html、javascript 和 css 都放在这里: jsfiddle

Answer 1

我建议使用 jquery 用其他东西改变你的 body 。包含 jquery 代码:

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

然后做这样的事情。

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

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

如果您只想向主体添加一些 html，或者如果您有一个特定的 div，您可以使用 .prepend() 和 .append() 等函数您希望从其类别中更改地址:

如果你有:

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

然后使用:

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

此外，如果你想从另一个页面加载，你可以使用.get()。

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