Javascript 单击html超链接时如何将一个div替换为另一个
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5936512/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to replace one div with another when clicking the html hyperlink
提问by Mr A
Possible Duplicate:
Replace Div with another Div
可能的重复：
用另一个 Div 替换 Div
Hi,
你好，
I have got 2 navigation menus, what I want to do when a client click on a link of first menu , the div id="img" should be replaced by div id="img2" , similarly when i click on the link of menu 2 div id="img2" should be replaced by div id="img" . Any ideas or suggestions ..
我有 2 个导航菜单，当客户端单击第一个菜单的链接时我想做什么，div id="img" 应该替换为 div id="img2" ，同样当我单击菜单链接时2 div id="img2" 应替换为 div id="img" 。任何想法或建议..
回答by Limpan
Something like this might help you:
像这样的事情可能会帮助你：
//Using jQuery Change div attribute "id" on click:
$('#link_1_id').click(function(){
$('#img').attr('id','img2');
});
Edit: Oops didnt understand the question. To replace a div with another when clicking a link element:
编辑：哎呀不明白这个问题。单击链接元素时将 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();
});
});
To add sliding effects take a look at .slideDown()or slideUp().
http://api.jquery.com/slideDown/
要添加滑动效果，请查看.slideDown()或slideUp()。
http://api.jquery.com/slideDown/
回答by Harry Joy
Try this:
尝试这个：
document.getElementById("img").innerHTML = document.getElementById("img2").innerHTML;
in html
在 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>
in js:
在js中：
function changeDiv(i){
if(i==1)
document.getElementById("img").innerHTML = document.getElementById("img2").innerHTML;
else
document.getElementById("img2").innerHTML = document.getElementById("img").innerHTML;
}
回答by thecodeparadox
Try this:
尝试这个：
HTML:
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');
});
