Как открыть вкладку при наведении мыши на jquery без использования iframe и размещения всего контента на одной странице?

Question

Я просто хочу открыть другую вкладку без обновления и при наведении указателя мыши вот так http://fnagel.github.com/jQuery-Accessible-RIA/Tabs/mouseover.html. Возможно ли с этими вещами.

• URL страниц должен быть изменен так, как это сейчас. Я хочу сохранить контент на отдельной странице
• при нажатии на другую вкладку следует открыть без обновления
• я не хочу открывать вкладку как IFrame

Мне понравилась идея этого http://jonplante.com/demo/tabs-1-2/?js=on, но URL-адрес страницы не меняется, поэтому другие страницы нельзя добавить в закладки

Answer 1

Jquery Tools Tabs обрабатывает кнопку возврата, как показано в этой демонстрации:

http://flowplayer.org/tools/demos/tabs/history.html

Answer 2

Конечно, и это легко. Во-первых, ваш HTML будет выглядеть примерно так:

<div class="container">
  <div class="tabs">
    <div class="tab" id="tab-1">Tab 1</div>
    <div class="tab" id="tab-2">Tab 2</div>
    <div class="tab" id="tab-3">Tab 3</div>
  </div>
  <div class="tabContent">
    <div class="content visible" id="content-tab-1"><!-- content for Tab 1 --></div>
    <div class="content hidden" id="content-tab-2"><!-- content for Tab 2 --></div>
    <div class="content hidden" id="content-tab-3"><!-- content for Tab 3 --></div>
  </div>
</div>

В этом примере предполагается, что у вас есть классы hidden и visible, настроенные для скрытия и отображения элемента. Классы tab и content предназначены для использования с JS и стилями, а другие классы действительно предназначены только для целей моделирования. Теперь для JS:

$( function ( ) {
  $('.tabs .tab').mouseover( function( ) {
    $('.tabContent .content').addClass( 'hidden' ).removeClass( 'visible' );
    $('#' + $(this).attr( 'id' )).removeClass( 'hidden' ).addClass( 'visible' );
  } );
} );

Возможно, в JS есть небольшая ошибка или две, как я только что написал здесь для вас, но концепция будет работать. Вы просто должны правильно оформить свой стиль. Я бы установил position: relative; на div.tabContent и position: absolute; left: 0; top: 0; на div.tabContent div.content.

Надеюсь, это работает для вас.

Answer 3

Что вам нужно сделать, это добавить хеш-имя в document.location (я не включаю сам код табуляции, для удобства чтения)

Допустим, HTML-код вашей вкладки выглядит следующим образом:

<a href="/page-to-fetch">Page</a>

Тогда Ваш javascript будет выглядеть так:

$('a.tab').mouseover(function(){
    document.location = document.location.hash = this.href;
    // Insert code for loading ajax content of the url of the tab pressed
    // Something like
    $('.tab-content-area').load(this.href);
});

Таким образом, когда вы щелкаете по вкладке, URL-адрес изменится на + '#sjjdsjsd', поэтому URL-адрес изменится. И ваша кнопка "Назад" тоже будет работать.

Тогда вам просто нужно добавить код для загрузки страницы, чтобы проверить, есть ли установленное значение хеш-функции, и загрузить этот контент (если мы пришли с другой страницы или что-то в этом роде)

$(document).ready(function(){
    if (document.location.hash) {
        $('.tab-content-area').load(document.location.hash);
        // Or however you're doing it or want to do it.
    }
});

Это должно быть все, что вам нужно. Но я не знаю ваш код вкладки или вы используете плагин для вкладок.

Answer 4

Посмотрите jQueryUI. Предоставляет функциональность «вкладок»:

http://jqueryui.com/demos/tabs/

У него есть демонстрационные онлайн-версии, и если вы посмотрите на правое меню, вы увидите, что AJAX и указатель мыши - это демо 2 и 3.