Question

我的html页面使用CSS和float分为三列。在左侧栏中，我要选择一系列链接...如何引导这些链接在中间（主）浮动框中打开？

代码来自https://www.w3schools.com/css/tryit.asp?filename=trycss_template2_float，区别在于我使用

将样式表与html分开了

<link rel="stylesheet" type="text/css" href="test.css">

将两个文件捆绑在一起。

关于我尝试过的...什么都没有。 w3s链接似乎没有适合我放置在该链接的YYYY部分的任何内容。

Answer 1

$(".links a").on("click", function (e) {
  e.preventDefault();
  $(".content #myIframe").attr("src", $(this).attr("href"));
});

div { width: 49%; display: inline-block; }
.content { border: 1px solid #ccc; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="links">
  <ul>
    <li><a href="http://exocraft.io">exocraft.io</a></li>
    <li><a href="https://slither.io">slither.io</a></li>
    <li><a href="https://www.bing.com">bing.com</a></li>
  </ul>
</div>
<div class="content">
  <iframe id="myIframe" src=""></iframe>
</div>

Answer 2

执行此操作

$(".links a").on("click", function (e) {
  e.preventDefault();
  $(".content #myIframe").attr("src", $(this).attr("href"));
});

div { width: 49%; display: inline-block; }
.content { border: 1px solid #ccc; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="links">
  <ul>
    <li><a href="https://www.google.com">google</a></li>
    <li><a href="https://www.yahoo.com">yahoo</a></li>
    <li><a href="https://www.microsoft.com">microsoft</a></li>
  </ul>
</div>
<div class="content">
  <iframe id="myIframe" src=""></iframe>
</div>

一个浮动中的内容来自另一个浮动中的ref

2 个答案: