1

JQuery + HTML + CSS

私が持っている「div」タグを更新するために、ナビゲーションバーのリンクを取得しようとしています。私はそれを機能させましたが、メイン ビューアーにページをロードする前に、各ハイパーリンクを 2 回クリックする必要があります。なんで？ワンクリックでロードするにはどうすればよいですか?

test.js:

function onScreen(id){
    $("a#" + id).click(function(){$("div#viewer").load(id + '.html')});  
}

main.html:

<a href="#" id="about" onclick="onScreen('about')">About Us</a>
<a href="#" id="account" onclick="onScreen('account')">My Account</a>

等

<div class ="article" id="viewer">
    <p>welcome to this awesome site! </div>

同じフォルダーに「about.html」ファイル (およびその他の必要なすべてのファイル) があります。繰り返しになりますが、コードは機能しますが、想定どおりには機能しません。

4

6 に答える 6

5

最初のクリックはonScreenを実行します。これにより、ロード関数がクリックイベントに関連付けられます。したがって、ロード機能は、2回目にクリックしたときにトリガーされます。

編集

解決策は、タグのonclick属性を削除することです。<a href=#>

$(function(){
    $("a[href='#']").click(function(){$("div#viewer").load(this.id + '.html')});
})
于 2012-07-26T22:01:26.797 に答える
2

onScreenをに変更します

function onScreen(id){
   $("div#viewer").load(id + '.html'); 
}

説明：

以前に行ったことは、クリックされたときにリンクにクリックイベントを添付することでした。つまり、初めてクリックしたときに、リンクが次のクリックでコンテンツをロードできるようになり、2回目しか機能しなくなりました。

于 2012-07-26T22:01:08.497 に答える
2

冗長なコードがいくつかあるだけです。2 つのクリック イベントを添付しました。

  1. 属性を使用してマークアップをインライン化しonClickます。
  2. とのonScreen()機能で.click()。

リンクをクリックして初めて、実際の.click()ハンドラーが作成されます。そのため、1 回クリックしてハンドラーを作成する必要があり、2 回目のクリックでコールバック関数がトリガーされます。

を削除して、.click()その関数内にコードを残すことができます。したがって、onScreen()関数は次のようになります-

function onScreen(id){
  $("div#viewer").load(id + '.html');
}

代わりにこの構文を使用してコードを改善することもできます-

$('a.internalLink').on('click',function(
  $("div#viewer").load($(this).id + '.html');
));

<a>これは、このように動作させたいすべてのタグに のクラス属性を与えることを前提としていますinternalLink。jQuery セレクターを使用して簡単にグループ化できるように、類似の要素に同じクラス名を付ける方がはるかに簡単です。

jQuery 1.7 以降では新しい.on()関数が優先されます

于 2012-07-26T22:03:24.300 に答える
2

うーん...まず第一に、これは最善の解決策ではありません。より良い解決策は次のとおりです。

<a href="about.html" class="scriptable" id="about">About Us</a>
<a href="account.html" class="scriptable" id="account">My Account</a>

と

$(document).ready(function(){
     function displayScreen(screenname){
         var url_to_load = screenname + '.html';
         $('#viewer').load(url_to_load);

     }
     $('.scriptable').live("click", function(ev){
         var screenname = $(this).attr('id');
         displayScreen(screenname);
         ev.preventDefault();
     });
});

Facebook は rel="ajaxify" 属性を使用していますが、同様のソリューションを提供していますが、原則はまったく同じです。

(次のステップ: ある種の履歴 API を使用して、URL がユーザーのナビゲーションに従うようにします)

于 2012-07-26T22:08:14.470 に答える
1

jQueryを使用しているので、インラインonclickを捨てて代わりにバインドしてください。これにより、コードがよりクリーンになり、理解しやすく変更しやすくなります。

<a href="#" id="about" class="viewer">About Us</a>
<a href="#" id="account" class="viewer">My Account</a>
<div class ="article" id="viewer">
    <p>welcome to this awesome site!</p>
</div>
​&lt;script>
$(function(){
    $("a.viewer").click(function(){
        alert($(this).attr('id') + '.html');
        $("div#viewer").load(this.id + '.html')
    });  
})​;
</script>

ワーキング JSFiddle

于 2012-07-26T22:04:12.833 に答える
0

試す

$(document).ready(function(){
  $("a").click(function(){
    $("div#viewer").load(this.id + '.html')
  });
});
于 2012-07-26T22:07:48.043 に答える