How to open tab with mouse using jquery without using iframe and placing all content on one page?

Question

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

• The page URL should be the same as Now. I want to save the content on a separate page.
• when you click on another tab, open without updating
• I do not want to open the contents of the tab as an IFrame

I liked the idea of http://jonplante.com/demo/tabs-1-2/?js=on , but the URL of the page does not change, so other pages cannot be bookmarked

Answer 1

The JQuery Tools tab handles the back button, as shown in this demo:

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

Answer 2

Suray, and it's easy. First, your HTML will 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 that the hidden and visible classes are configured to hide and show the element. The tab and content classes are for use with JS and styles, while other classes are really just for styling. Now for JS:

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

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

Hope this works for you.

Answer 3

Take a look at jQueryUI. It provides tab functionality:

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

It has demos online, and if you look at the right menu, you will see that AJAX and mice are demos 2 and 3.

Answer 4

What you need to do is add the hash name in document.location (I do not include the tab code itself, for readability)

Let's say your HTML tab is similar:

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

Then your javascript will look 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 on the tab, the URL will be changed to anything + '#sjjdsjsd' - so the URL will change. And your back button will also work.

Then you just need to add the code to load the page to check if the hash value is set, and load this content (if we go 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 all you need. But I do not know your tab code or if you use the tab plugin.