How do I get multiple links to open in the same container?_问答_开发者

Example: click first link, view contents. Click second link and have contents replaced with second link?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<开发者_开发百科head>
<title>bq13  ----trying Stackoverflow suggestions</title>
<script type="text/javascript" src="http://transeeq.com/jquery/jquery-1.3.2.min.js"></script> 
<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 href="swedish.html">Swedish</a><br>
<a href="medical.html">Medical</a><br>

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

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">
<html>
<head>
<title>bq13  ----trying Stackoverflow suggestions</title>
<script type="text/javascript" src="http://transeeq.com/jquery/jquery-1.3.2.min.js"></script>
<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

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 ) { ... });

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

精彩评论

关注公众号

热门标签

图文推荐

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

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：