1

3 つのアンカー (a) タグがあり、すべてが単一の div 要素を共有して動作します。以下の私のhtmlを参照してください。基本的にアンカータグ1をクリックするとid="fillDiv"のdivをhtmlで埋めるようにしたいです。2 番目のアンカー タグをクリックすると、その #fillDiv が消去され、新しい html に置き換えられます。そのような機能を設定するにはどうすればよいですか。これが私の試みです

HTML:

<div>
<a id="a1" href="javascript: changeDiv();">tag1</a>
<a id="a2" href="javascript: changeDiv();">tag2</a>
<a id="a3" href="javascript: changeDiv();">tag3</a>
</div>

<div id="fillDiv"></div>

JS:

function changeDiv(){
     if changeDiv().is('#a1'){
         document.getElementById('fillDiv').html('<div>filling 1</div>');
         }

     elseif
         changeDiv().is('#a2'){
         document.getElementById('fillDiv').html('<div>filling 2</div>');
         }

     elseif
         changeDiv().is('#a3'){
         document.getElementById('fillDiv').html('<div>filling 3</div>');
         }
}

注: div の表示/非表示機能は使用したくありません。入力する Div は 1 つの div のみであり、最初に display:none プロパティを持つ他の 2 つの div と結合されていないことが重要です。

どんな助けでも大歓迎

ありがとうございました

4

2 に答える 2

2

あなたのhtmlは同じままです。onclickイベントを削除してjsの下で試してください-

$("a").click(function(){
   if($(this).attr("id") == "a1") {
      $("#fillDiv").html("<div>filling 1</div>")
   }
   else if($(this).attr("id") == "a2") {
      $("#fillDiv").html("<div>filling 2</div>")
   }
   else if($(this).attr("id") == "a3") {
      $("#fillDiv").html("<div>filling 3</div>")
   }
});

これがフィドルです - http://jsfiddle.net/ashwyn/cPZfX/

ID が次のようa1, a2, a3になる場合は、ループを作成してさらに最適化を行います。

于 2012-06-28T09:27:26.217 に答える
2

以下のコードはあなたの例に従いますが、IDに基づいてより一般的にすることができます。

var element;
var handler = function( event ) {
    var target = document.getElementById('fillDiv');
    switch this.id {
       case 'a1':
         target.html('<div>filling 1</div>');
         break;
       case 'a2':
         target.html('<div>filling 2</div>');
         break;
       case 'a3':
         target.html('<div>filling 3</div>');
         break;
    }
};
for ( var i = 1; i <= 3; i++ ) {
  element = document.getElementById( 'a' + i );
  element.addEventListener( 'click', handler );
}
于 2012-06-28T09:33:53.170 に答える