0

单击链接时如何动态更改 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

4

2 回答 2

2

我建议使用 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()

如果你有：

<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));
});
于 2012-05-11T18:17:20.550 回答
1

尝试 ：

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

于 2012-05-12T00:37:42.890 回答