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：

<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 に答える