CODEWITHSUNDEEP
jquery
Claes Gustavsson
Claes Gustavsson

Reputation: 5679

change div content with one of 3 other divs?

I have 3 links, and a container div with an image. When I click a links I want to change the image with one of 3 divs containing 3 different videocodes?

So if I click on link one, then change the image to videocode 1.

What is the best way of doing that? appendTo, replaceWith or what - with jquery. Thanks.

Upvotes: 0

Views: 821

Answers (1)

Bjorn
Bjorn

Reputation: 5362

Are you looking for something like this?

<a href="image1.jpg">Link 1</a>
<a href="image2.jpg">Link 2</a>

<img id="image" src="image1.jpg" />

$('a').click(function() {
  $('#image').src($(this).attr('href'));
  return false;
});

Another solution:

<a href="#image1">Link 1</a>
<a href="#image2">Link 2</a>

<div id="container">
  <img id="image1" src="image1.jpg" />
  <img id="image2" src="image2.jpg" />
</div>

$('a').click(function() {
  $('#container img').hide();
  $('img'+$(this).attr('href')).show();
  return false;
});

Based on your comment, something like this should do the trick:

<a href="#videocode1">Link 1</a>
<a href="#videocode1">Link 2</a>

<div id="container">
  <img id="image1" src="image1.jpg" />
  <div id="videocode1">
    yadda
  </div>
  <div id="videocode2">
    yadda
  </div>
</div>

$('a').click(function() {
  $('#container img, #container div').hide();
  $($(this).attr('href')).show();
  return false;
});

Upvotes: 2

Related Questions