2010-11-28 8 views
0

私はhtmlとjsを使用しています。ユーザーが何かをクリックすると、htmlコードのチャンクを表示したいと思います。コードは少し大きいので、document.getElementById("display").innerHTML =を使用するのは魅力的ではありません。私はグーグルでIFrameについて知っていましたが、スクロールバーやものを避けたいのですが、単純なdivを使うことができたらどうしたらいいですか?私はjqueryも使用していますが、jqueryのhide()関数についてはわかっていますが、ID表示のdiv内の項目は動的に変更されるはずですので、item1をクリックするとtext1を取得し、item2はtext2 、と私はtextxinnerhtmlできちんとした形で

答えて

1

あなたは各要素のrel=属性で指定されたIDを持つ要素を切り替えることができます

$('.ShowLink').click(function() { 
    $('#' + this.rel).toggle(); 
    return false; 
}); 

このような何かを探しているようですねのための特定の場所を持ちたいですShowLinkクラス。たとえば

<a href="#" rel="Text1" class="ShowLink">Show something</a> 
... 
<div id="Text1"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</div> 
1

のinnerHTML方法、おそらく最高のパフォーマンスが賢明です。追加のコンテンツ(AJAX呼び出しなど)を取得しない場合は、事前にすべてのブロックを別々のdivに配置し、 "display" css属性を "none"に設定します。次に、特定のdivの属性変更をトリガーして、ボタンまたはリンクにイベントを添付して「ブロック」することができます。

0

これは、複数のdivを互いに重ねて配置し、ユーザーの入力に基づいて適切なものを表示/非表示することによって実行できます。この方法で要素の内容を操作する必要はなく、単に表示/非表示にするだけです。そのトリックは、要素を絶対的に配置することです。これを行う場合は、リストの最後の divを静的に配置することができます(これらのすべてが同じサイズであると仮定して)。代わりに、絶対配置された要素のためのスペースを予約する、静的に配置された別のdiv内にこれらの要素をすべて配置することもできます。

関連する問題