Folgen Sie den links auf der Registerkarte in jquery ui tab

Habe ich jquery tabs wie

<ul id="tabsList">
    <li><a href="#tab-1">Name 1</a></li>
    <li><a href="#tab-2">Name 2</a></li>
    <li><a href="http://www.google.com/">Name 3</a></li>
</ul>

<div id="tab-1">content 1</div>
<div id="tab-2">content 2</div>

den ersten beiden Registerkarten laden Sie die entsprechenden divs. Der Dritte aber sollte gehen google.com stattdessen tut Sie nichts. Es fügt nur http://example.com/index.html#ui-tabs-[object object]
an die url an.

Ich entwickle ein wordpress-plugin und die admin-Seite benötigt ein tab-interface. Getestet habe ich diese in einem lokalen server und nicht arbeiten

update:

möchte ich nicht laden google.com innerhalb der Seite. Es sollte öffnen Sie die Webseite in einem neuen tab/Fenster wie normale links stellen.

warum haben eine Registerkarte, die öffnet sich ein neues Fenster....macht keinen Sinn
nicht verstehen kann, ist die Frage ? Lesen Sie die Frage gut
Ich habe gelesen, dass die Frage - die Sie dann verändert es...
sorry

InformationsquelleAutor Aakash Chakravarthy | 2010-06-15

2

Ich hatte gerade das gleiche problem.
Ich löste es, indem Sie die tab-Anker, die geladen werden soll extern eine Klasse mit dem Namen "followtablink". Dann habe ich meine modifizierten tabs() Aufruf diese:
```
$('.tabs').tabs({
select: function(event, ui) {
    var url = $.data(ui.tab, 'load.tabs');
    var className = ui.tab.className;

    if( className == "followtablink" ) {
        location.href = url;
        return false;
    }
    return true;
}});
```
Jedes mal, wenn eine Registerkarte ausgewählt wird, folgt er dem link, wenn es auf die gegebene Klasse.

Hinweis: In JQuery > 1.9.0 verwenden aktivieren anstelle von select
- dies sah in den api-docs, aber es scheint nicht zu verhindern, dass die tabs vom laden der Inhalte über ajax zunächst. irgendwelche Tipps dafür?
InformationsquelleAutor Tails
2

Ich bin mir nicht sicher, was Sie wollen, es zu tun, aber wenn es öffnen sollte der link als neue Seite/Ersatz für die aktuelle Seite, die Dokumentation erläutert:
[Wie...] ...Folgen einem tab die URL statt
laden Ihre Inhalte über ajax

Beachten Sie, dass das öffnen einer Registerkarte in einem neuen
Fenster ist unerwartet, z.B.
inkonsistente Verhalten aussetzen einer
usablity problem
(http://www.useit.com/alertbox/tabs.html).
```
$('#example').tabs({
    select: function(event, ui) {
        var url = $.data(ui.tab, 'load.tabs');
        if( url ) {
            location.href = url;
            return false;
        }
        return true;
    } });
```
Sehen http://jqueryui.com/demos/tabs/#...follow_a_tab.27s_URL_instead_of_loading_its_content_via_ajax

Hinweis: In JQuery > 1.9.0 verwenden aktivieren anstelle von select
- Was bedeutet "nicht von nutzen" bedeuten? Gibt es Fehler? Es funktioniert einfach nicht? Bitte erklären.
- hat bei mir nicht funktioniert entweder. die ajax-content noch lädt zunächst... und die tab-links " hrefs geändert werden, um ui-tabs-[object]
InformationsquelleAutor MvanGeest
1

Als ich sah, dass der generierte Quellcode, der
```
<li><a href="http://www.google.com/">Name 3</a></li>
```
wurde geändert, um
```
<li><a href="#ui-tabs-[object Object]">Name 3</a></li>
```
Aber andere Listen waren identisch. Ich weiß noch nicht, ob es ist aufgrund des Problems des testens in den lokalen server.

Also habe ich versucht, diese option. Ich entfernte das "href" - Attribut und fügte hinzu, eine Klasse mit dem Namen "theLink" wie
```
<li><a class="theLink" target="_blank">Name 3</a></li>
```
und dann habe ich noch folgende jquery
```
$('.theLink).attr('href', 'http://www.google.com');
```
danach arbeitete ich unter VORBEHALT. Die Dritte Registerkarte, wenn Sie geklickt werden geladen google.com in einem neuen tab

InformationsquelleAutor Aakash Chakravarthy

Können Sie nicht, da das anfordern von Inhalten google.com wird eine cross-domain-Aufruf und die xhr Aufruf fehl.

Warum nicht in einem iframe innerhalb des Dritten Inhalts-div mit src-Attribut auf google verweisen?

Demo hier

<ul id="tabsList">
    <li><a href="#tab-1">Name 1</a></li>
    <li><a href="#tab-2">Name 2</a></li>
    <li><a href="#tab-3">Google Tab</a></li>
</ul>

<div id="tab-1">content 1</div>
<div id="tab-2">content 2</div>
<div id="tab-3">
    <iframe src="http://www.google.com"></iframe>
</div>

InformationsquelleAutor redsquare

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.