问题描述:

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

网友答案:

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

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

网友答案:

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.

网友答案:

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.

网友答案:

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.

相关阅读:
Top