单击时获取选定锚标记的 id 并相应地设置另一个 div 的 html

Question

我有 3 个锚 (a) 标签，它们都共享一个 div 元素来操作。请参阅下面的我的 html。基本上，当您单击锚标记 1 时，我希望它用 html 填充 id="fillDiv" 的 div。当您单击第二个锚标记时，它应该清除该#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 只是一个 div，而不是与其他 2 个在开始时具有 display:none 属性的 div 相结合。

任何帮助表示赞赏

谢谢

Answer 1

您的 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 那么你做一个循环并做更多的优化。

Answer 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 );
}