Question

示例：单击第一个链接，查看内容。点击第二个链接并用第二个链接替换内容？

<!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>

Answer 1

请看这个，link 这就是你需要做的。

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

为你的主播添加一个'链接'类。

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

还会在jquery上的link document上查看您的基本选择器。

您将看到您正在尝试使用以下代码获取元素：

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

如果要选择具有该类的元素，可以在它之前添加一个点：

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

将选择具有“瑞典语”类的任何元素，无论它是什么元素。如果您的元素具有'瑞典语'作为ID，则可以在其上添加＃，如：

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

Answer 2

我修改了你的代码......

<!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>

内容正在替换为（我认为）您想要的内容，但是FYI没有与以下CSS选择器匹配的元素：

div.iframe链路
div.swedish
div.medical

如何在同一容器中打开多个链接？

2 个答案: