Html 如何使用css更改iframe的src_Html_Css_Iframe

Html 如何使用css更改iframe的src

html css iframe

Html 如何使用css更改iframe的src,html,css,iframe,Html,Css,Iframe,我有这段代码和idk，当我点击“菜单”中的项目时，如何使其不重定向到其他页面，而是更改iframe的src。。我应该换衣服吗代码： <html> <head> <title> First attempt at html/css </title> <style> #header { background-color:black;

我有这段代码和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>


html/css的首次尝试
#标题{
背景色：黑色；
颜色：白色；
文本对齐：居中；
填充物：5px；
}
#菜单{
背景色：#eeeeee；
高度：470px；
宽度：200px；
浮动：左；
文本对齐：居中；
填充物：5px；
}
#内容{
浮动：左；
}
#页脚{
背景色：黑色；
颜色：白色；
明确：两者皆有；
文本对齐：居中；
填充物：5px；
}
电影画廊






版权所有Andrew.Xd 2014

我仍然是这个领域的新手，所以我真的不知道如何修改代码以获得我想要的东西。

如果您有jQuery（您应该！），那么您可以这样做：

function Start() {

  $('#menu').click(function (e) {

      e.preventDefault();
      $('#content').find('iframe').prop('src', "whateverURL");
  });
}

$(Start);

既然您想取消

标记中的

href

，为什么不完全删除它们并用

标记替换它们？

它不是Css代码，而是JS代码

您需要将您的项目连接到一个事件列表，然后将href值放到iframe上 //jquery加载方法//

  $(function(){
         $('#menu a').click(function(e){
              e.preventDefault();
              $('iframe ').attr('src',$(this).attr('href'));
         });
    });

不能使用css修改DOM元素的属性。使用js/jQuery：

$（文档）.ready（函数（）{
$（“#菜单a”）。单击（功能（e）{
e、 preventDefault（）；//所以浏览器不会跟随链接。
$（“#content iframe”）.attr（“src”），$（this.attr（“href”）；
});
});
#标题{
背景色：黑色；
颜色：白色；
文本对齐：居中；
填充物：5px；
}
#菜单{
背景色：#eeeeee；
高度：470px；
宽度：200px；
浮动：左；
文本对齐：居中；
填充物：5px；
}
#内容{
浮动：左；
}
#页脚{
背景色：黑色；
颜色：白色；
明确：两者皆有；
文本对齐：居中；
填充物：5px；
}

电影画廊






版权所有Andrew.Xd 2014
css是一种标记语言，因此您将无法使用css执行您想要的操作
但是，您可以为iframe提供一个id，并使用javascript更改源代码。很好地解释了这一点，我做得再好不过了：p
您可以简单地在菜单项中添加一个目标，在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>



或者我误解了这个问题？
首先，这个问题没有在jQuery下标记，标题本身说这个问题需要“CSS”的努力。@Tusharaj：好吧，那么告诉我们如何在CSS中完成它：）很可能不是。但你必须提到这一点，以便提问者知道，这不能以他所要求的方式来完成。你不清楚，抱歉说：）