點擊HTML超鏈接

Question

可能重複時如何更換一個DIV與另一：
Replace Div with another Div

嗨，

我有2個導航菜單，我想什麼當客戶端點擊第一個菜單的鏈接時，應該用div id =「img2」替換div id =「img」，同樣當我點擊菜單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'); 
});