Использование jQuery для перехода между двумя элементами div, изображения работают, а iframes - нет - PullRequest
Новая
       37

Использование jQuery для перехода между двумя элементами div, изображения работают, а iframes - нет

0 голосов
/ 03 ноября 2011

Редактировать: Загруженные в прямом эфире, с изображениями и с фреймами

Я пытаюсь заставить pane1 исчезнуть в pane2. Это работает с изображениями, но я хочу сделать это с iframes. Это возможно? Любой вклад приветствуется.

JS таков: 

$(function() {
$("#tab ul").tabs("#panes > div", {effect: 'fade', fadeOutSpeed: 400});
});

HTML такой: 

<div id="tab">
    <ul>
        <li>
            <a href="#1">Tab 1</a>
        </li>
        <li>
            <a href="#2">Tab 2</a>
        </li>
    </ul>
</div>

[...] 

<div id="panes">
    <div>
        <iframe src="pane1.html" width="720" height="200" frameborder="0" scrolling="no" />
    </div>
    <div>
        <iframe src="pane2.html" width="720" height="200" frameborder="0" scrolling="no" />
    </div>
</div>

При загрузке iframe pane1 отображается, как и ожидалось, и нажатие Tab 2 затухает, но затухает.

Тем не менее, он отлично работает, используя тот же код, что и выше, но с изображениями в div: 

<div id="panes">
    <div>
        <img src="images/pane1.png" />
    </div>
    <div>
        <img src="images/pane2.png" />
    </div>
</div>

Вот соответствующий CSS 

#tab ul {   
    width:720px;
    margin: 0 auto 0;
    left: 0;
}

#tab li {   
    float:left;
    list-style-type:none;
    margin-top:0px;
    }

#tab a {
    display:block;
    position:relative;
    text-decoration:none;
    color: #5472c0;
    }   

#tab a.current {
    color: #272f80;
    }

#panes {
    position:relative;
    height: 212px;
    left: 50%;
    width:720px;
    margin-left: -360px;
    margin-top: 16px;
}

Заранее спасибо!

Редактировать: Загруженные в прямом эфире, с изображениями и с фреймами

1 Ответ

2 голосов
/ 03 ноября 2011

У меня нет КЛЮЧА о том, почему это работает, но если вы заканчиваете iFrames полным тегом, похоже, он работает. 

    <div id="here">
        <iframe src="http://www.vitalitypilates.com/tabtest/pane1.html" width="720" height="200" frameborder="0" scrolling="no"></iframe>
    </div>
    <div id="gone">
        <iframe src="http://www.vitalitypilates.com/tabtest/pane2.html" width="720" height="200" frameborder="0" scrolling="no"></iframe>
    </div>
...