0

クリックしたときに別のファイルからコンテンツをロードして、ページを更新する必要がないようにするハイパーリンクのあるページがあります。現在の「.container」の内容を、外部の html ファイルからの「.container」の内容に置き換える必要があります。

これが私のhtmlです

 <li> <a href="#" class="loader" id="indexLink">Chris Lebeau</a>

ページの下部にある私の jQuery を次に示します。

  <script type="text/javascript">
     jQuery(document).ready(function() {
     jQuery("#indexLink").click(function(event) {
     jQuery("div.container").html(ajax_load).load("index.html");
    event.preventDefault();
});

});

ORG チャート @ http://frommesetc.com/test/org.htmlの最初の男をクリックすると、.container がフェードアウトし、index.html の .container がフェードインします。

4

3 に答える 3

3

javascript:コードに少し欠けています：

<a href="javascript:load()">Chris Lebeau</a>

編集

load()関数も定義する必要があります。

<script type="text/javascript">
...

var loadUrl = "/index.html";
function load() {
    $("div.container").html(ajax_load).load(loadUrl);
}
</script>

これは、ページに HTML 要素が含まれていることを前提としていますclass="container"。

編集2

最後に、現在ではUnobtrusive JavaScriptの使用が推奨されています。このアプローチを使用するには、次のようにします。

<a href="index.html" id="chris_lebeau">Chris Lebeau</a>

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery("#chris_lebeau").click(function(event) {
        jQuery("div.container").html(ajax_load).load("index.html");
        event.preventDefault();
    });
});
</script>

これは現在、物事を行うための「最良の」方法ですが、このjavascript:load()方法が機能する場合は、それで十分です。

于 2012-08-17T02:31:44.567 に答える
0

使用する

jQuery("div.container").load("index.html");
于 2012-08-17T07:04:47.623 に答える
0

ここにはいくつかの問題があります。

まず、「コンテナ」クラスの要素がないため、クリック ハンドラは実際には何もしていません。

また、クリックのリスナーがある場合は、アンカーから JS 関数にリンクする必要はありません。

次に例を示します。

HTML:
<a class="button" href="#">Hello</a>
<div class="newcontent"></div>

JAVASCRIPT:
var loadingAnim = "<img src='img/ajax-loader.gif' alt='loading...' />";
var dataToLoad = "/index.html";
$("a.button").click(function(){
    $("div.newcontent")
        .html(loadingAnim)
        .load(dataToLoad);
});
于 2012-08-17T02:45:16.547 に答える