Question

更新＃3：Dan和Xero，你的答案包括JS。由于一些无法解释的原因，我无法使用JS。我也不能使用JQuery。这个问题上的标签已经更新，以防它们造成一些混乱。

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

CODE：

<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。可以这样做吗？

Answer 1

由于您提到您不需要JS解决方案，因此您可以使用CSS隐藏所有iframe，除非选择了一个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>

Answer 2

您可以在您提供的链接中以相同的方式执行此操作

<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。

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

Answer 3

这是一个基本脚本。

<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>

使用CSS按钮控制iFrame

3 个答案: