如何使用CSS更改iframe的src
[英]How to change the src of an iframe with css
問題描述
我有這段代碼和idk如何做到這一點，所以當我單擊“菜單”中的項目時，不要重定向到其他頁面，而是要更改iframe的src。
碼：
<html>
<head>
<title> First attempt at html/css </title>
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#menu {
background-color:#eeeeee;
height:470px;
width:200px;
float:left;
text-align:center;
padding:5px;
}
#content {
float:left;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<div id="header">
<h1> Movies Gallery</h1>
</div>
<div id="menu">
<a href="the_maze_runner.html" style="text-decoration:none"> The Maze Runner </a> <br>
<a href="guardians_of_the_galaxy.html" style="text-decoration:none"> Guardians of The Galaxy </a> <br>
<a href="the_guest.html" style="text-decoration:none"> The Guest </a> <br>
<a href="edge_of_tomorrow.html" style="text-decoration:none"> Edge of Tomorrow </a>
</div>
<div id="content">
<iframe src="the_maze_runner.html" width=1110px height=475px frameborder=0></iframe>
</div>
<div id="footer">
Copyright Andrew.Xd 2014
</div>
</body>
</html>
我仍然是這個領域的入門者，所以我真的不知道如何修改代碼以獲得我想要的東西。
5 個解決方案
解決方案1
2 已采納 2014-09-29 14:36:13
您可以簡單地在菜單項中添加目標 ，並在iframe中添加名稱 ，如下所示：
<a target="frameName" href="the_maze_runner.html" style="text-decoration:none">The Maze Runner</a>
<iframe name="frameName" src="the_maze_runner.html" width=1110px height=475px frameborder=0></iframe>
還是我誤解了這個問題？
解決方案2
1 2014-09-29 14:31:46
css是一種標記語言，因此您將無法使用css做您想做的事情。
但是，您可以給iframe一個ID並使用javascript更改源。 這樣的帖子很好地解釋了它，我無法做得更好：p
解決方案3
0 2014-09-29 14:29:08
如果您使用jQuery（應該使用！），則可以執行以下操作：
function Start() {
$('#menu').click(function (e) {
e.preventDefault();
$('#content').find('iframe').prop('src', "whateverURL");
});
}
$(Start);
由於要取消<a>標記中的href ，為什么不完全刪除它們並用<div>標記替換它們？
解決方案4
0 2014-09-29 14:31:17
它不是Css代碼，而是JS代碼。
您需要將商品連接到事件列表器，將href值放在iframe上//將jquery加載到負載上///
$(function(){
$('#menu a').click(function(e){
e.preventDefault();
$('iframe ').attr('src',$(this).attr('href'));
});
});
解決方案5
0 2014-09-29 14:31:27
您不能使用css修改DOM元素的屬性。 使用js / jQuery：
$(document).ready(function() { $("#menu a").click(function(e) { e.preventDefault(); //so browser will not follow link. $("#content iframe").attr("src", $(this).attr("href")); }); });
#header { background-color: black; color: white; text-align: center; padding: 5px; } #menu { background-color: #eeeeee; height: 470px; width: 200px; float: left; text-align: center; padding: 5px; } #content { float: left; } #footer { background-color: black; color: white; clear: both; text-align: center; padding: 5px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="header"> <h1> Movies Gallery</h1> </div> <div id="menu"> <a href="the_maze_runner.html" style="text-decoration:none"> The Maze Runner </a> <br> <a href="guardians_of_the_galaxy.html" style="text-decoration:none"> Guardians of The Galaxy </a> <br> <a href="the_guest.html" style="text-decoration:none"> The Guest </a> <br> <a href="edge_of_tomorrow.html" style="text-decoration:none"> Edge of Tomorrow </a> </div> <div id="content"> <iframe src="the_maze_runner.html" style="width:1110px; height:475px" frameborder=0></iframe> </div> <div id="footer"> Copyright Andrew.Xd 2014 </div>
如何使用CSS更改iframe src
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.