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 ) { ... });
加载中,请稍侯......
精彩评论