2

Possible Duplicate:
Replace Div with another 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 ..

Community
  • 1
  • 1
Mr A
  • 6,448
  • 25
  • 83
  • 137

3 Answers3

5

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:

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/

Matt
  • 74,352
  • 26
  • 153
  • 180
Limpan
  • 662
  • 1
  • 5
  • 6
3

Try this:

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

in 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:

function changeDiv(i){
   if(i==1)
       document.getElementById("img").innerHTML = document.getElementById("img2").innerHTML;
   else
       document.getElementById("img2").innerHTML = document.getElementById("img").innerHTML;
}
Harry Joy
  • 58,650
  • 30
  • 162
  • 207
  • can i add a bit of sliding effect like one image replacing by other shadow in or out – Mr A May 09 '11 at 12:02
  • Try this steps: First apply shadow out effect then change content and then apply fade in effect. – Harry Joy May 09 '11 at 12:05
  • for fadein/fadeout effect try one of this: http://www.javascriptkit.com/script/script2/fadeinout.shtml or http://www.switchonthecode.com/tutorials/javascript-tutorial-simple-fade-animation or http://stikiflem.wordpress.com/2008/09/11/javascript-div-fade-infade-out/ – Harry Joy May 09 '11 at 12:13
  • `img.innerHTML`? What kind of `innerHTML` does an `` have? – Rudie May 09 '11 at 12:27
  • @Ruddie: see carefully. `img` is the id of `div` and `div` do have `innerHTML`. And i'm using `document.getElementById` not `document.getElementByTagName`. – Harry Joy May 09 '11 at 12:29
1

Try this:

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');
});
thecodeparadox
  • 86,271
  • 21
  • 138
  • 164