0

更新#3：Dan 和 Xero，你的答案包括 JS。由于一些无法解释的原因，我不能使用 JS。我也不能使用 JQuery。此问题的标签已更新，以防引起混淆。

我正在重新设计我的网站，并从 HTML 教程网站复制了这个基本的 CSS 导航栏代码：

代码：

<head>
<style> 
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:100px;
font-weight:bold;
color:#FFFFFF;
background-color:#0066CC;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:lowercase;
}
a:hover,a:active
{
background-color:#003399;
}

</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>

但问题是我希望导航栏中的这些按钮控制它下面的 iframe src。我在 StackOverflow 上找到了这个，但我不知道如何实现这个： Button or Link That Changes Page in Iframe

它都将是本地的（在同一个 Web 服务器上），我试图避免使用 JavaScript/JQuery。可以这样做吗？

4

3 回答 3

1

既然您提到您不想要 JS 解决方案，您可以使用 CSS 隐藏所有 iframe，除非选择一个。由于这些部分需要嵌套，但它是没有 js 的解决方案。

的CSS：

<style type="text/css" media="screen">
.collapse > * + *{
  display:none;
}
.collapse > *{
  cursor:pointer;
}
.collapse:focus{
  outline:none;
}
.collapse:focus > * + *{
  display:block; 
}
</style>

的HTML

  <div class="collapse" tabindex="1">
     <h2 >Collapse 1 +</h2>
    <iframe src="http://google.com"></iframe>
  </div>

    <div class="collapse" tabindex="1">
     <h2 >Collapse 2 +</h2>
      <iframe src="http://google.com"></iframe>
  </div>
于 2013-11-09T18:50:51.643 回答
0

您将在您提供的链接中以几乎相同的方式进行操作

<script>
function iFrame(url){
    document.getElementByTagName('iframe').src = url;
}
</script>

然后只需将其应用于按钮：

<ul>
<li><a href="#home" onclick="iFrame('URLHERE')">Home</a></li>
<li><a href="#news" onclick="iFrame('URLHERE')">News</a></li>
<li><a href="#contact" onclick="iFrame('URLHERE')">Contact</a></li>
<li><a href="#about" onclick="iFrame('URLHERE')">About</a></li>
</ul>

不要忘记放入 iframe。

如果我没有正确回答你的问题。通知我，我会改正的。

于 2013-11-09T18:11:22.770 回答
0

这是一个基本脚本。

<script type="text/javascript">
    // dynamically change the iframe src.
    function load_iframe( url ) {
        // set variable with the iframe id
        var $iframe = $('#dynamic_frame');
        // make certain the iframe is available
        if ( $iframe.length ) {
            $iframe.attr('src',url);   
            return false;
        }
        return true;
    }
</script>

请注意，您需要将链接网址更改为您自己的完全限定网址。

<ul>
    <li><a href="http://yoursite.com#anyhash" onclick="return load_iframe(this.href);" >Your Site</a></li>
    <li><a href="http://apple.com#anyhash" onclick="return load_iframe(this.href);" >Apple.com</a></li>
    <li><a href="http://microsoft.com#anyhash" onclick="return load_iframe(this.href);" >Microsoft</a></li>
    <li><a href="http://google.com#anyhash" onclick="return load_iframe(this.href);">Google</a></li>
</ul>

将 iframe 拖放到您的页面中：

<iframe src="http://google.com" id="dynamic_frame"></iframe>
于 2013-11-09T18:13:43.583 回答