0

現在、ファイルをdivにロードするためのこのコードがあります。オプションの 1 つをクリックすると、AJAX を使用してページを div にロードするのではなく、ページにリンクするだけです。

$(document).ready(function(){
  $('.eventSelect').click(function(){
    var url = 'includes/events.php';
    $('.content').load(url); 
  });
});   

$(document).ready(function(){
  $('.podSelect').click(function(){
    //Retrieve Content from the back-end PHP page, and pass the ID selected
    var url = 'includes/content.php';
    $('.content').load(url); 
  });
});

これは、クリックする 2 つのオプションを含むコードです。したがって、ポッドをクリックすると、ポッドのコンテンツが div クラス (コンテンツ) に表示され、イベントについても同様です。

echo "<div id=\"viewSelect\">";
echo "<div class=\"eventSelect\">";
echo "<a href=\"/../includes/events.php\">";
echo "events";
echo "</a>";
echo "</div>";
echo "<div class=\"podSelect\">";
echo "<a href=\"/../includes/events.php\">";
echo "pods";
echo "</a>";
echo "</div>";
echo "</div>";

私の問題は href に関係していると思いますが、よくわかりません。

誰かがそれを助けることができれば、ありがとう。

4

4 に答える 4

1

デフォルトの動作を防ぐには、クリック ハンドラーから false を返す必要があると思います。

于 2013-03-10T12:24:53.210 に答える
1

JSを次のように変更するだけです 

 $(document).ready(function(){
      $('#viewSelect > a').click(function(){
        var url = $(this).attr('href');
        $('.content').load(url);
        return false; 
      });
    });

上記で何が起こっているか
$(document).ready();<-- ドキュメントがロードされた後にコードが実行されることを確認します

$('#viewSelect > a').click();<-- idanchor内のすべてのタグをイベントにバインドしますviewSelectclick

$(this).attr('href');<-- clckeked anchor href属性を取得

return false; <-- デフォルトの機能を防止します (ここではハイパーリンクのリダイレクト)

いくつかの提案

  • 同じ機能を 2 回複製する必要はありません。これは、単一の関数のみで実現できます。
  • HTMLまた、php echoステートメントにプレーンを含めた理由もわかりません。これは、サーバーにとって不要なオーバーヘッドです。
  • jQuery のドキュメントを適切に読み$(document).ready()、新しい関数を記述するたびに開始しないでください 。
于 2013-03-10T12:39:18.853 に答える
0

jquery bro について聞いたことがありますか?...jquery を試してみると、問題が解決します。

function loadAjax(url,display)
{ $("."+display).html('Loading Content Please Wait...'); 
$.get(url,function(data){  $("."+display).html(data) }); }

今、パラメータは

 url=ajax feed to load (eg. includes/events.php)
    display = where to show your feed result. (eg. content)

このように使う

<div class="content"></div> 
<a Onclick='loadAjax("includes/events.php","content")'>Click To Load Events</a>
<a Onclick='loadAjax("includes/contents.php","content")'>Click To Load Events</a>

明らかに、これを機能させるには jquery ライブラリが必要です。

于 2013-03-10T12:45:28.093 に答える
0

<a>タグを外してみる

echo "<div id=\"viewSelect\">";
echo "<div class=\"eventSelect\">";
echo "events";
echo "</div>";
于 2013-03-10T12:21:58.850 に答える