Блог

Наше решение работает с родительским фреймом и фреймом основного содержимого. Одна из страниц в iframe основного содержимого настроена с серией разделов, используемых в качестве вкладок, например, следующим образом.

 <div id="topRow">
    <div class="mainInformation tab tabSelected" runat="server" id="mainInformationTop">
        <div class="tabLeft">
            <div class="tabMain">
                Main Information
            </div>
        </div>
    </div>
    <div class="executives tab" runat="server" id="executivesTop">
        <div class="tabLeft">
            <div class="tabMain">
                Executives
            </div>
        </div>
    </div>                
</div
<div id="secondRow">
    <div id="mainInformationTabGroup" runat="server" class="mainInformation tabGroup">
        <div id="overview" runat="server" class="tab tabSelected overview">
            <div class="tabLeft">
                <div class="tabMain">
                    Overview
                </div>
            </div>
        </div>
        <div id="locations" runat="server" class="tab locations">
            <div class="tabLeft">
                <div class="tabMain">
                    Locations
                </div>
            </div>
        </div>
    </div>
    <div id="executivesTabGroup" runat="server" class="executives tabGroup" style="display: none">
        <div id="companyExecutives" runat="server" class="tab companyExecutives">
            <div class="tabLeft">
                <div class="tabMain">
                    Company Executives
                </div>
            </div>
        </div>
        <div id="affiliatedExecutives" runat="server" class="tab affiliatedExecutives">
            <div class="tabLeft">
                <div class="tabMain">
                    Affiliated Company Executives
                </div>
            </div>
        </div>
    </div
</div>
  

Обработчики событий jquery загружаются из локального файла .js, пример, относящийся к приведенному выше HTML, выглядит следующим образом

 $('#topRow div.tab').click(function() {
    $('#topRow div.tabSelected').removeClass('tabSelected');
    $(this).addClass('tabSelected');
})
$('#topRow .mainInformation').click(function() {
    $('#secondRow').css('display', 'block');
    $('#thirdRow').css('display', 'none');
    resizeAllIframes();
    $('#secondRow .tabGroup').css('display', 'none');
    $('#secondRow .mainInformation').css('display', 'block');
    $('#secondRow .mainInformation div.tab').not('.locked').children().first().trigger('click');
});
$('#topRow .executives').click(function(){
    $('#secondRow').css('display', 'block');
    $('#thirdRow').css('display', 'none');
    resizeAllIframes();
    $('#secondRow .tabGroup').css('display', 'none');
    $('#secondRow .executives').css('display', 'block');
    $('#secondRow .executives div.tab').not('.locked').children().first().trigger('click');
});
  

(События щелчка просто меняют атрибут «src» iframe)

Проблема, с которой я сталкиваюсь, заключается в том, что иногда, когда мы загружаем эту страницу вкладки (и только в Internet Explorer 9 , IE7, похоже, не имеет этой проблемы), я нажимаю на вкладку, и ничего не происходит. События наведения для CSS загружаются просто отлично, но щелчок по вкладке ничего не делает. Однако, если я нажму на одну вкладку и ничего не произойдет, я могу нажать на следующую, и она будет работать нормально. Аналогично, если я сначала щелкну в любом месте основного фрейма содержимого, а затем на вкладке, он всегда будет запускать обработчик событий.

Мы заметили, что эта проблема возникает почти полностью, когда мы пытаемся перейти на страницу с вкладками из родительского фрейма (у нас есть быстрый поиск там), и мы используем ответ.Перенаправление для загрузки iframe со страницей вкладки. Я попытался перенаправить этот быстрый поиск на целевую страницу внутри iframe, которая затем использует ответ.Перенаправление, чтобы вернуть нас на страницу вкладки, но в итоге дает те же результаты. Когда мы нажимаем на гиперссылку внутри iframe (Target=»_self»), это работает просто отлично.

Эта проблема не возникает в Firefox, Chrome или IE7, но она возникает в IE9 .

У кого-нибудь есть какие-либо мысли, идеи, известные ошибки, которые я пропускаю, что-нибудь в этом роде?

вот как вы привязываете событие к элементу:

 $(document).bind('click','#topRow div.tab',function() {
    $('#topRow div.tabSelected').removeClass('tabSelected');
    $(this).addClass('tabSelected');
});
  

сделайте то же самое для других событий, просто измените часть селектора (я имею в виду « #topRow div.tab «) на нужные селекторы.