jqueryでパラメータとして渡されたhtmlファイルをロードしますか？

私はjqueryの初心者です。私は、ページを再ロードせずにコンテンツを読み込むページを作成しようとしています。私のテストページには、リンク1とリンク2の2つのリンクがあります。デフォルトのページがクリックされたとき。それはちょうど 'こんにちは'と言う。いずれかのリンクをクリックすると、「Hello link1」（リンク1をクリックした場合）、「Hello link2」（リンク2をクリックした場合）と表示されます。 Link1の内容（html）はlink1.htmlにあり、link2の内容はlink2.htmlファイルにあります。いずれかのリンクをクリックすると、リンクのhtmlページの名前がパラメータとして渡されます。ここは私がやったことです：私はちょうどパラメータとしてhtmlファイルの名前を渡した場合、問題があるjqueryでパラメータとして渡されたhtmlファイルをロードしますか？

<head> 
<title>Ajax Practice</title> 
<script type="text/javascript" src="scripts/jquery.js"></script> 
<script type="text/javascript">           
    $(document).ready(function(){ 
    $("a").click(function test(filename){ 
     alert(filename); 
     var b = $("a").attr("title"); 
     alert(b); 
     //$('#menuContents').load($(filename)).fadeIn("slow"); 
     //$('#menuContents').load('link1.html').fadeIn("slow"); 
     $('#menuContents').load(b).fadeIn("slow"); 
    }); 
    }); 
</script> 
</head> 

<body> 
<div id="page-wrap"> 
    <div id="menu"> 
     <a href="javascript:test('link1.html');" title="link1.html">link1</a> 
     <a href="#" title="">link2</a>  
    </div> 
    <div id="menuContents"> 
     <h1>Hello!</h1> 
    </div> 
</div> 

</body> 
</html>

、それは代わりに、それはオブジェクトとして読み込むのを取得し、文字列値として読まれません。コード内の最初のアラートは、[オブジェクトオブジェクト]メッセージを表示します。 .attr属性を使用してリンクのタイトルからテキストを読み込み、.load属性を使用してページを読み込むことができます。また、.load属性で直接HTMLページ名を与えることで、ページの内容を変更することもできます（コードでコメントアウト）。

ハードコーディングやタイトルからの読み込みではなく、HTMLページの名前をパラメータとして渡すことができる人はいますか？

ありがとうございます。

出典

2011-06-29 sanjeev40084

$("a").click(function test(filename){

実際にはイベントオブジェクトです。ここhttp://jsfiddle.net/WUBsq/

を例にしてみ

<a href="javascript:test('link1.html');" title="link1.html">link1</a>

機能テストを呼び出しますので、あなたのjavascriptのコード

function test(filename){ 
    alert(filename) 
    // your code here 

}

でこの関数を定義することができます：あなたのコードでは、http://api.jquery.com/click/

他にチェックしてください

多くのクリーンな方法があります。

<a class="refresh" data-title="link1.html">click here</a>

...

$(document).ready(function(){ 
    $('a.refresh').click(function(){ 
     var title = $(this).attr('data-title'); 
     alert(title); 

     // your code here 
    }) 
})

ここで試してみてください。

出典

2011-06-29 02:21:53

http://jsfiddle.net/WUBsq/3/だけの準備ができて（）を削除し、（）関数をクリックして、一人で

function test(filename){ 
    alert(filename); 
    //$('#menuContents').load($(filename)).fadeIn("slow"); 
    //$('#menuContents').load('link1.html').fadeIn("slow"); 
    $('#menuContents').load(filename).fadeIn("slow"); 
}

PSをテスト機能を残します。実際に関数をjqueryでクリックして関数を定義すると関数を外部に呼び出すことはできません。テスト関数を暗黙的に定義する必要があります。それではどこでも呼び出せます。

いい方法がありますあなたはjQueryの$アヤックス（）の中に見てみたいことがあり、そのようなPHPなどのサーバーサイドスクリプトを使用している場合

<html> 
    <head> 
    <title>Ajax Practice</title> 
    <script type="text/javascript" src="scripts/jquery.js"></script> 
    <script type="text/javascript">           
     $(document).ready(function(){ 
     $("a").click(function (e){ 
      $('#menuContents').load($(this).attr('href')).fadeIn("slow"); 
      e.preventDefault(); 
      return false; 
     }); 
     }); 
    </script> 
    </head> 

    <body> 
    <div id="page-wrap"> 
     <div id="menu"> 
      <a href="link1.html">link1</a> 
      <a href="link2.html">link2</a>  
     </div> 
     <div id="menuContents"> 
      <h1>Hello!</h1> 
     </div> 
    </div> 

    </body> 
    </html>

出典

2011-06-29 02:23:01 viclm

残念ながら、これは動作しないでしょう。 http://jsfiddle.net/5zffN/2/ –

少なくとも、伝播を防ぐ必要があります。そうでなければ、$（ 'a'）の後にhrefがトリガーされます。 –

の下にこれを行うには

出典

2011-06-29 02:26:26

jqueryでパラメータとして渡されたhtmlファイルをロードしますか？

答えて

関連する問題