Использование кнопок CSS для управления iFrame

0

Обновление № 3: Дэн и Xero, ваши ответы включают JS. Я не могу использовать JS по нескольким необъяснимым причинам. Я также не могу использовать JQuery. Теги по этому вопросу были обновлены, если они вызвали некоторую путаницу.

Я перепроектирую свой сайт и скопировал этот базовый CSS-код на веб-сайте HTML:

КОД:

<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 или Link, которая меняет страницу в iframe

Все будет локально (на одном и том же веб-сервере), и я пытаюсь избежать JavaScript/JQuery. Это можно сделать так?

Теги:
iframe

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>
Поделиться
  • 0
    На самом деле, это лучшее решение из всех! Спасибо, Дэн!
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.

Если бы я не ответил на ваш вопрос правильно. Сообщите мне, и я исправлю это.

Поделиться
  • 0
    Но нет ли способа сделать это без JavaScript?
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>
Поделиться
  • 0
    Но это использует JScript. Спасибо, но мне нужно избегать этого, длинная история.
  • 0
    Не динамически. Вы можете создать новую страницу для каждого уникального iframe и ссылку на каждую.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню