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

请注意：我不想使用show / hide div函数，对我来说重要的是填充Div只是一个div，而不是另外两个div在开始时没有显示display：none属性。

任何帮助表示赞赏

谢谢

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/

如果您的身份证明会像a1, a2, a3那样，那么您就会制作一个循环并进行更多优化。

Answer 2

下面的代码遵循您的示例，但您可以根据内容使其更通用。

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

在点击时获取所选锚标记的ID并相应地设置另一个div的html

2 个答案: