单击html超链接时如何将一个div替换为另一个[重复]

Question

可能重复：
Replace Div with another Div

嗨，

我有 2 个导航菜单，当客户点击第一个菜单的链接时，我想要做什么，div id="img" 应该替换为 div id="img2" ，同样当我点击菜单 2 div id="img2" 的链接应替换为 div id="img" 。任何想法或建议..

Answer 1

这样的事情可能会对你有所帮助：

//Using jQuery Change div attribute "id" on click:

$('#link_1_id').click(function(){ 
      $('#img').attr('id','img2'); 
});

编辑：哎呀不明白这个问题。在单击链接元素时将 div 替换为另一个：

HTML:
<a href="#" id="link_1">Press me</a>
<a href="#" id="link_2">Press me</a>

<div id="div_1"> Content1 </div>
<div id="div_2"> Content2 </div>

Jquery:
$(document).ready(function(){

  // Hide div 2 by default
  $('#div_2').hide();

  $('#link_2').click(function(){ 
      $('#div_1').hide();
      $('#div_2').show();
  });

  $('#link_1').click(function(){ 
      $('#div_2').hide();
      $('#div_1').show();
  }); 
});

要添加滑动效果，请查看.slideDown() 或slideUp()。 http://api.jquery.com/slideDown/

Answer 2

试试这个：

document.getElementById("img").innerHTML = document.getElementById("img2").innerHTML;

---

在html中

<a href="#" onclick="changeDiv(1)">Menu 1</a>
<a href="#" onclick="changeDiv(2)">Menu 2</a>
<div id="img">
//--- div content
</div>
<div id="img2">
//--- div content
</div>

在js中：

function changeDiv(i){
   if(i==1)
       document.getElementById("img").innerHTML = document.getElementById("img2").innerHTML;
   else
       document.getElementById("img2").innerHTML = document.getElementById("img").innerHTML;
}

Answer 3

试试这个：

HTML：

<a class="link_1" href="#">Link 1</a>
<a class="link_2" href="#">Link 2</a>
<div class="main" style="width:170px;height:170px;border:1px solid #000;overflow:hidden;padding:10px;position:relative;left:0;top:50px">
    <div class="wrapper" style="width:350px;position:absolute">
        <img src="image/Example.jpg" class="image_1 image" style="margin:10px;display:inline;height:150px; width:150px"/>
        <img src="image/pr_4.jpg" class="image_2 image" style="margin:10px;display:inline;height:150px; width:150px"/>
    </div>
</div>

JQUERY：

$('.link_1').click(function(){
    $('.wrapper').animate({'left':'-170px'},'linear');
});

$('.link_2').click(function(){
    $('.wrapper').animate({'left':'10px'},'linear');
});