# Jquery Tabs: Bestimmten Tab mit Inhalt bei Start aktivieren



## mtensche (28. November 2013)

Hallo zusammen,

bin leider kein Profi im Bereich JS und habe nach längerer google Suche auch nichts gefunden was mir weitergeholfen hat.

Würde mich über Eure Hilfe sehr freuen.

Habe auf meiner Seite jquery tabs integriert. 

Ich möchte nun zunächst bei Aufruf der Seite eine gewisse Registerkarte z.B. tab2 samt Inhalt laden (und nicht wie bisher den tab1).

Daneben würde ich gerne noch von einer beliebigen Unterseite auf einen gewissen Tab auf der Seite verlinken. Also ich befinde mich z.B. auf der Startseite und möchte dort einen Link zum Tab3 samt Inhalt der Seite mit den tabs setzen. Geht das?

JS:


```
$(document).ready(function() {
        //Default Action
        $(".tab_content").hide(); //Hide all content
        $("ul.tabs li:first").addClass("active").show(); //Activate first tab
        $(".tab_content:first").show(); //Show first tab content
        //On Click Event
        $("ul.tabs li").click(function() {
                $("ul.tabs li").removeClass("active"); //Remove any "active" class
                $(this).addClass("active"); //Add "active" class to selected tab
                $(".tab_content").hide(); //Hide all tab content
                var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
                $(activeTab).fadeIn(); //Fade in the active content
                return false;
         });
});
```

HTML:


```
<ul class="tabs">
         <li><a href="#tab1">Register 1</a></li>
        <li><a href="#tab2">Register 2</a></li>
        <li><a href="#tab3">Register 3</a></li>
 <li><a href="#tab4">Register 4</a></li>
    </ul>

<div id="tab1" class="tab_content">Inhalt 1 </div>
<div id="tab3" class="tab_content">Inhalt 2 </div>
<div id="tab4" class="tab_content">Inhalt 3 </div>
<div id="tab5" class="tab_content">Inhalt 4 </div>
```




Vielen Dank.

MfG
Marco


----------



## jeipack (28. November 2013)

Punkt 1: Bestimmter Tab öffnen
http://api.jqueryui.com/tabs/#option-active

zB: $("#tabs").tabs({ active: 1 }); //Öfnet den zweiten Tab



Punkt 2: Auf einen bestimmten Tab verlinken
Dann musst du mit Parameter, zB in der URL arbeiten.
zB: http://domain.com/meineseite.html?tab=2

Und dann mit JS auslesen welcher Tab in der URL gesetzt ist und diesen mit der Methode aus Punkt1 öffnen.



Und wegen Infos im Netz/Google: jQuery hat eine sehr gute Doku, auch zu jQuery UI Modulen. Tabs: http://api.jqueryui.com/tabs


----------



## mtensche (28. November 2013)

jeipack hat gesagt.:


> Und dann mit JS auslesen welcher Tab in der URL gesetzt ist und diesen mit der Methode aus Punkt1 öffnen.




Könntest du mir das evtl. etwas genauer erklären?


----------



## jeipack (29. November 2013)

Folgendes Script einfügen:

```
jQuery(document).ready(function() {
function get_url_param( name )
{
	name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");

	var regexS = "[\\?&]"+name+"=([^&#]*)";
	var regex = new RegExp( regexS );
	var results = regex.exec( window.location.href );

	if ( results == null )
		return "";
	else
		return results[1];
}
var activetab = get_url_param("tab");
$("#tabs").tabs({ active: activetab });
});
```
Funktion für URL-Parameter ist von: http://www.jaqe.de/2009/01/16/url-parameter-mit-javascript-auslesen/

Danach beim Aufruf ?tab=1 an die URL anhängen (für den zweiten Tab).


Eventuell musst du noch den Selektor $("#tabs") ändern. Jenachdem wie dein Tabs-Container heisst.

Gruss


----------



## mtensche (29. November 2013)

Es funktioniert leider nicht...


Mein js:


```
$(document).ready(function() {
  //Default Action
  var show = 0; //0-basierend

  $(".tab_content").hide(); //Hide all content
  $("ul.tabs li:eq("+show+")").addClass("active").show(); //Activate first tab
  $(".tab_content:eq("+show+")").show(); //Show first tab content
  //On Click Event
  $("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(".tab_content").hide(); //Hide all tab content
    $(this).addClass("active"); //Add "active" class to selected tab
    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active content
    return false;
  });
  $('div[id^=tab] a').click(function () {
    $($(this).attr('href')).trigger('click');

function get_url_param( name )
{
    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");

    var regexS = "[\\?&]"+name+"=([^&#]*)";
    var regex = new RegExp( regexS );
    var results = regex.exec( window.location.href );

    if ( results == null )
        return "";
    else
        return results[1];
}
var activetab = get_url_param("tab");
$("#tab_container").tab_container({ active: activetab });
});
});
```


Und hier die html wie sie auf den objektseiten ist:


```
<div class="container">
 <ul class="tabs">
         <li><a id="tab-nav1" href="#tab1">Objektvorstellung</a></li>
        <li><a id="tab-nav2" href="#tab2">Lage / Standort</a></li>
        <li><a id="tab-nav3" href="#tab3">Wohneinheiten</a></li>
 <li><a id="tab-nav4" href="#tab4">Kontakt / Anfrage</a></li>
    </ul>
<div class="tab_container">
<div id="tab1" class="tab_content">Inhalt</div>
<div id="tab2" class="tab_content">Inhalt</div>
<div id="tab3" class="tab_content">Inhalt</div>
<div id="tab4" class="tab_content">Inhalt</div>
</div>
</div>
```


ich verstehe es nicht...


----------



## jeipack (29. November 2013)

Ich habe mir Tabs jetzt nochmals angeschaut.

Hänge doch einfach mal `#tab2` an die URL.. das klappt schon von Haus aus:
http://jqueryui.com/resources/demos/tabs/default.html#tabs-2


Dein Script funktioniert aus mehreren gründen nicht.
1. `$("#tab_container").tab_container({ active: activetab });` müsste `$(".container").tab({ active: activetab });` heissen.
2. Muss das ausserhalb des Klickevents sein.


----------



## mtensche (29. November 2013)

js sieht jetzt so aus:


```
/*Objektseite Tabs*/
$(document).ready(function() {
  //Default Action
  var show = 0; //0-basierend

  $(".tab_content").hide(); //Hide all content
  $("ul.tabs li:eq("+show+")").addClass("active").show(); //Activate first tab
  $(".tab_content:eq("+show+")").show(); //Show first tab content
  //On Click Event
  $("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(".tab_content").hide(); //Hide all tab content
    $(this).addClass("active"); //Add "active" class to selected tab
    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active content
    return false;
  });
  $('div[id^=tab] a').click(function () {
    $($(this).attr('href')).trigger('click');
});

jQuery(document).ready(function() {
function get_url_param( name )
{
    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");

    var regexS = "[\\?&]"+name+"=([^&#]*)";
    var regex = new RegExp( regexS );
    var results = regex.exec( window.location.href );

    if ( results == null )
        return "";
    else
        return results[1];
}
var activetab = get_url_param("tab");
$(".container").tab({ active: activetab });
});
});
```


geht nicht....wenn man den link aufruft öffnet sich nicht das 2 Tab:

http://www.htp-immobilien.de/neubauimmobilien/villenpark-hirschgartenufer-berlin/index.php#tab2


----------



## jeipack (29. November 2013)

Hmm wo bindest du denn jQuery UI ein?

Wo initialisierst du Tab?

Finde das in deiner Seite so auf die schnelle nicht


----------



## mtensche (29. November 2013)

jeipack hat gesagt.:


> Hmm wo bindest du denn jQuery UI ein?



Für was benötige ich das. habe doch jquery eingebunden?



jeipack hat gesagt.:


> Wo initialisierst du Tab?



Was meinst du damit?


----------



## jeipack (29. November 2013)

Weil wir dann eventuell nicht vom gleichen sprechen 
Ich spreche von:
http://jqueryui.com/tabs/


Gib mal einen Link woher du deine Tab Lösung hast.


----------



## mtensche (29. November 2013)

Das weiß ich nicht mehr wo die her war. eine ganz simple. nicht diese http://jqueryui.com/tabs/


----------



## mtensche (29. November 2013)

habs gefunden....

http://www.htmldrive.net/items/show/542/Simple-Tabs-w-CSS-jQuery.html


----------



## jeipack (29. November 2013)

ach so, dann einfach einen Clickevent auf das entsprechende Tab auslösen:
$("#tab-nav2").click();
um den Tag zu wechseln.


Zusammen ergibt dass dann:

```
function get_url_param( name )
{
    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
 
    var regexS = "[\\?&]"+name+"=([^&#]*)";
    var regex = new RegExp( regexS );
    var results = regex.exec( window.location.href );
 
    if ( results == null )
        return "";
    else
        return results[1];
}
var activetab = get_url_param("tab");
$("#tab-nav"+activetab).click();
```

Das so in document.ready eingebaut und die URL:
http://www.htp-immobilien.de/neubauimmobilien/villenpark-hirschgartenufer-berlin/index.php?tab=2
wird den 2ten Tab öffnen.


----------



## mtensche (29. November 2013)

Habe es eingebaut.

JS sieht jetzt wie folgt aus:


```
/*Objektseite Tabs*/
$(document).ready(function() {
  //Default Action
  var show = 0; //0-basierend

  $(".tab_content").hide(); //Hide all content
  $("ul.tabs li:eq("+show+")").addClass("active").show(); //Activate first tab
  $(".tab_content:eq("+show+")").show(); //Show first tab content
  //On Click Event
  $("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(".tab_content").hide(); //Hide all tab content
    $(this).addClass("active"); //Add "active" class to selected tab
    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active content
    return false;
function get_url_param( name )
{
    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");

    var regexS = "[\\?&]"+name+"=([^&#]*)";
    var regex = new RegExp( regexS );
    var results = regex.exec( window.location.href );

    if ( results == null )
        return "";
    else
        return results[1];
}
var activetab = get_url_param("tab");
$("#tab-nav"+activetab).click();
});

  $('div[id^=tab] a').click(function () {
    $($(this).attr('href')).trigger('click');
});
  });
```


Funktioniert leider immer noch nicht....


----------



## jeipack (29. November 2013)

Doch meine Lösung funktioniert, habe sie mit deiner Seite getestet.
Zumindest auf dieser Seite ist es noch nicht eingebaut!
http://www.htp-immobilien.de/neubauimmobilien/villenpark-hirschgartenufer-berlin/index.php


Geh mal auf deine Seite und klicke F12. Da gibts einen Fehler. (Weil immer noch der alte Code drin ist)


----------



## mtensche (29. November 2013)

Ich finde den Fehler nicht...


Ich weiß ehrlich gesagt auch nicht was du meinst mit "auf dieser Seite ist es noch nicht eingebaut"****

Die js datei ist doch für alle gleich, da die scripte in einer externen js liegen (http://www.htp-immobilien.de/slider_objekt.js)


----------



## jeipack (29. November 2013)

Ahh könnte sein dass ich noch das alte JS File hatte (Browsercache) - sorry.

Aber .. schau dir mal den Code an, du hast die Funktion function get_url_param( name ) wieder im Clickevent.



```
/*Objektseite Tabs*/
$(document).ready(function() {
  //Default Action
  var show = 0; //0-basierend

  $(".tab_content").hide(); //Hide all content
  $("ul.tabs li:eq("+show+")").addClass("active").show(); //Activate first tab
  $(".tab_content:eq("+show+")").show(); //Show first tab content
  //On Click Event
  $("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(".tab_content").hide(); //Hide all tab content
    $(this).addClass("active"); //Add "active" class to selected tab
    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active content
    return false;


});

function get_url_param( name )
{
    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
 
    var regexS = "[\\?&]"+name+"=([^&#]*)";
    var regex = new RegExp( regexS );
    var results = regex.exec( window.location.href );
 
    if ( results == null )
        return "";
    else
        return results[1];
}

var activetab = get_url_param("tab");
$("#tab-nav"+activetab).click();

  $('div[id^=tab] a').click(function () {
    $($(this).attr('href')).trigger('click');
});
  });
  /*Objektseite Slider*/
jQuery(document).ready(function($) {
  $('#full-width-slider').royalSlider({
    arrowsNav: true,
    loop: false,
    keyboardNavEnabled: true,
    numImagesToPreload: 0,
    controlsInside: true,
    imageScaleMode: 'fill',
    arrowsNavAutoHide: false,
    controlNavigation: 'bullets',
    thumbsFitInViewport: false,
    navigateByClick: true,
    startSlideId: 0,
    autoPlay: false,
    transitionType:'move',
    globalCaption: false,
    deeplinking: {
      enabled: true,
      change: false
    }

  });
});
```


----------



## mtensche (30. November 2013)

ok...kannst du mir bitte sagen wie der code richtig aussehen muss bzw. wo die  function get_url_param( name ) hin muss, ich hab nämlich keine ahnung...bin kein js spezialist. vielen dank.


----------



## jeipack (30. November 2013)

Hey
Ja, nimm einfach den Code vom letzen Beitrag. Da habe ich die Funktion schon aus dem Clickevent genommen und richtig platziert.


----------



## mtensche (30. November 2013)

alles klar....super. es funktioniert:

Ich habe jetzt noch eine Frage....wenn ich jetzt zB den Reiter "Wohneinheiten" in einer anderen php Seite öffnen möchte...ist das möglich hierauf zu verlinken aus der normalen Seite oder ist ein externer Link hier in den Register-Tabs nicht möglich weil immer das Tab geöffnet wird?

Vielen Dank!!


----------



## mtensche (1. Dezember 2013)

Also noch mal kurz erklärt:

Ich möchte aus einem der Registerkarten-Tabs einen Link auf eine andere Seite setzen.

Zum Beispiel hier auf der Seite: http://www.htp-immobilien.de/neubauimmobilien/villenpark-hirschgartenufer-berlin/

Wenn man auf den Reiter "Kontakt/Anfrage" klickt, dass man auf unsere allgemeine Kontaktseite gelangt: http://www.htp-immobilien.de/view/kontakt/



Ist das möglich?


----------

