ansaurus

Question

How do I get multiple links to open in the same container?

Answer 1

A:

please see this, link that's what you need to do.

   $( function() {
     $( "a.links" ).click( function( e ) {
        var link = $(this).attr('href');
        $('.iframe-link').html( '<iframe src="' + link + '" frameborder="0"></iframe>' );
        e.preventDefault();
        return false;
     });
   });

add a 'links' class to your anchors.

<a href="swedish.html" class='links'>Swedish</a><br>
<a href="medical.html" class='links'>Medical</a><br>

also review your basic selector on this link document on jquery.

You will see that you're trying to get an element with the following codes of yours:

$( "swedish" ).click( function( e ) { ... });

If you want to select an element with the class you can add a dot before it like:

$( ".swedish" ).click( function( e ) { ... });

that will select any element that has a class of 'swedish', regardless on what element it is. If your element has 'swedish' as an id, you can add a # on it like:

$( "#swedish" ).click( function( e ) { ... });

Reigel 2010-01-22 00:16:44

please let me know if that solves your problem. I'll be happy to help. cheers!

Reigel 2010-01-22 01:17:08

Answer 2

A:

I fixed up you code a bit...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html>
<head>
<title>bq13  ----trying Stackoverflow suggestions</title>
<script type="text/javascript" src="http://transeeq.com/jquery/jquery-1.3.2.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">

$(document).ready(function(){
   $( function() {
     $( ".swedish" ).click( function( e ) {
        $('.iframe-link').html( '<iframe src="swedish.html" frameborder="0"></iframe>' );
        e.preventDefault();
        return false;
     });
   });


   $( function() {
     $( ".medical" ).click( function( e ) {
        $('.iframe-link').html( '<iframe src="medical.html" frameborder="0"></iframe>' );
        e.preventDefault();
        return false;
     });
   });


 });
</script>

<style>

div.iframe-link {
 position: relative;
 float: left;
 width: 175px;
 height: 205px;
 border: 3px solid blue;
}

div.swedish {
 position: relative;
 float: left;
 width: 175px;
 height: 205px;
}


div.medical {
 position: relative;
 float: left;
 width: 175px;
 height: 205px;
}


</style>
</head>
<body>


<a class="swedish" href="javascript: void(0);">Swedish</a><br>
<a class="medical" href="javascript: void(0);">Medical</a><br>

<div class="iframe-link">
</div>
</body>
</html>

The contents are being replaced as (I think) you desire, but FYI there are no elements that match the following CSS selectors:

div.iframe-link
div.swedish
div.medical

Drew Wills 2010-01-22 00:18:03

Drew - you are the MAN! This is working exactly as I had hoped. Thanks for your excellent help!

sonny5 2010-01-22 04:10:13

ansaurus

tags:

views:

answers:

How do I get multiple links to open in the same container?

related questions