如何在不使用iframe的情况下使用jquery在鼠标上打开选项卡，并将所有内容放在同一个页面上?

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.

我只想打开另一个选项卡，而不需要刷新鼠标，比如http://fnagel.github.com/jquery - accessibleria/tabs/mouseover.html。这些东西有可能吗?

Pages url should be change like as it now. I want to keep content in separate page
页面url应该像现在一样改变。我想把内容放在单独的页面上
on clicking on another tab it should open without refreshing
在点击另一个标签时，它应该是不刷新的。
i don't want to open tab content as a iframe
我不想把标签内容作为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

我喜欢这个http://jonplante.com/demo/tabs-1-2/?js=on但是页面url没有改变，所以其他页面不能被标记。

4 个解决方案

#1

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

Jquery Tools选项卡处理后退按钮，如下所示:

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

#2

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

调查,它很简单。首先，您的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>

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:

本例假设您已经设置了隐藏和可见类来隐藏和显示元素。选项卡和内容类用于JS和样式化，其他类实际上只用于样式化目的。现在的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.

在JS中可能会有一个小错误或者两个错误，我只是在这里给你们写的，但是这个概念是可行的。你只要把造型弄对就行了。我会设置位置:相对;表内容与位置:绝对;左:0;上图:0;在div.tabContent div.content。

Hope this works for you.

希望这对你有用。

#3

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

看看jQueryUI。它提供了“标签”功能:

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.

它在网上有演示，如果你看右边的菜单，你会看到AJAX和鼠标移过来是演示2和3。

#4

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:

假设你的标签HTML是这样的:

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

Then Your javascript would be like this:

那么你的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);
});

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.

这样，当您单击一个选项卡时，URL将更改为+ '# sjjdsjjsd '——因此URL将更改。你的后退按钮也可以工作。

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.

这应该是你所需要的。但是我不知道你的标签代码或者你是否在使用标签插件。

#1