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：

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

javascript：

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

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

[编辑]

我在这里删除了所有内容，html，javascript和css： jsfiddle

Answer 1

我建议使用jquery用其他东西来改变你的身体。包含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()之类的函数： p>

如果你有：

<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));
});

Answer 2

尝试：

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;
    });
});

修改

使用JQuery

尝试这个JSFiddle

动态改变身体内容

2 个答案: