0

更新 #3: Dan と Xero、あなたの回答には JS が含まれています。いくつかの説明できない理由で JS を使用できません。JQueryも使えません。この質問のタグは、混乱を招いた場合に備えて更新されました。

私は自分のウェブサイトを再設計しており、この基本的な CSS navbar コードを HTML チュートリアル Web サイトからコピーしました。

コード：

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

しかし問題は、navbar のこれらのボタンでその下の iframe src を制御したいということです。StackOverflow でこれを見つけましたが、これを実装する方法がわかりません: 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>

リンク URL を独自の完全修飾 URL に変更する必要があることに注意してください。

<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 に答える