Question

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

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

Answer 1

您只需在菜单项中添加目标，在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>

或者我错过了解问题？

Answer 2

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

function Start() {

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

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

$(Start);

由于您要取消href代码中的<a>，为什么不完全删除它们并将其替换为<div>代码？

Answer 3

它不是Css代码，它是一个JS代码。

您需要将项目连接到事件列表器，将href值放在iframe上 // jquery on load mathod //

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

Answer 4

您无法使用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>

Answer 5

css是一种标记语言，因此您将无法使用css执行所需操作。

但是，您可以为iframe指定ID并使用javascript更改源代码。 This SO post完美地解释了这一点，我无法做得更好：p

如何用css更改iframe的src

5 个答案: