How to open tab on mouse over using jquery without using iframe and putting all content in same page?

Question

I just want to open another tab without refreshing and on mouse over like this http://fnagel.github.com/jQuery-Accessible-RIA/Tabs/mouseover.html . Is it possible with these things.

• Pages url should be change like as it now. I want to keep content in separate page
• on clicking on another tab it should open without refreshing
• i don't want to open tab content as a iframe

I liked the idea of this http://jonplante.com/demo/tabs-1-2/?js=on but page url is not changing so other pages cannot be bookmarked

Answer 1

Surey, and it's easy. First, your HTML would look something like this:

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

This example assumes you have the classes hidden and visible set up to hide and show an element. The tab and content classes are for use with JS and styling, and the other classes are really only for styling purposes. Now for the JS:

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

There might be a small error or two in that JS as I just wrote it here for you, but the concept will work. You just have to get your styling right. I would set position: relative; on div.tabContent and position: absolute; left: 0; top: 0; on div.tabContent div.content.

Hope this works for you.

Answer 2

Have a look a jQueryUI. It provides 'tabs' functionality:

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

It has demos online, and if you look at the right-hand menu, you'll see that AJAX and mouse-over are demos 2 and 3.

Answer 3

What you need to do is add a hash name to the document.location (I'm not including the tab-code itself, for readability)

Let's say your tab HTML is like:

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

Then Your javascript would be like this:

$('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);
});

That way, when you click a tab, the URL will change to whatever it is + '#sjjdsjsd' - so the URL changes. And your back button will work as well.

Then you just need to add code for when the page loads, to check if there's a hash value set, and load that content (if we're coming from another page or something like that)

$(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.
    }
});

That should be about all you need. But I don't know your tab code or if you're using a tab-plugin.

Answer 4

Jquery Tools Tabs handles the back button as is shown in this demo:

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