Jquery Tabs: Bestimmten Tab mit Inhalt bei Start aktivieren

M

mtensche

Grünschnabel
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:

Javascript: 
$(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:

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
 
Zuletzt bearbeitet von einem Moderator:
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
 
Folgendes Script einfügen:
Javascript: 
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
 
Es funktioniert leider nicht...


Mein js:

Javascript: 
$(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:

HTML: 
<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...:confused:
 
Zuletzt bearbeitet von einem Moderator:
js sieht jetzt so aus:

Code: 
 /*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
 
Hmm wo bindest du denn jQuery UI ein?

Wo initialisierst du Tab?

Finde das in deiner Seite so auf die schnelle nicht
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück