Tabs beim Laden der Seite auswählen

  • Themenstarter Themenstarter joky_joky
  • Beginndatum Beginndatum
J

joky_joky

Hallo Leute

bin mal wieder seit langem hier im Forum und hätte mal ne Frage nachdem ich schon wieder eingerostet bin in Sachen jquery.

Hoffe dieses Forum ist richtig den ich möchte das ganze per php ansprechen.


Code:
(function($){
	$.fn.Tabs = function(option){
		// Param plugin
		var param = jQuery.extend({
			fadeSpeed: "slow", // @param : slow, medium, fast
			defautContent: 1, // @param : number ( TabNav-number)
			autoNav: "false", // @param : true or false
			closeTabs : "false" // @param : true or false;
		}, option);
		$(this).each(function() {
			// Initialisation
			var $this = this;
			var $thisId = "#"+this.id;
			var nbTab = $($thisId+" > div").size();
			autoNav();
			showCloseTabs();
			hideAll();
			changeContent(param.defautContent);
			// Fonctions
			function hideAll(){
				// Masque tous les content
				$($thisId+" .Tabs").hide();
			}
			function changeContent(indice){
				// Masque tous les content - Supprime la classe active de tous les onglets 
				// Ajoute la classe active à l'onglet cliqué - Affiche le content ciblé - Execute showCloseTabs
				hideAll();
				$($thisId+" .TabNav li").removeClass("active");
				$($thisId+" #TabNav-"+indice).addClass("active");
				$($thisId+" #Tabs-"+indice).fadeIn(param.fadeSpeed);
				showCloseTabs();
			}
			function autoNav(){
				// Génère les onglets automatiquement
				if(param.autoNav == "true"){
					var listeNav = '';
					for(i=1; i!=nbTab; i++){
						listeNav = listeNav+'<li id="TabNav-'+i+'">'+i+'</li>';
					}
					$($thisId+" .TabNav").append('<ul>'+listeNav+'</ul>');
				}
			}
			function showCloseTabs(){
				// Génére un bouton de fermeture générale des content
				if(param.closeTabs == "true"){
					if($($thisId+" .TabNav li.close").size() == 0){
						$($thisId+" .TabNav ul").append("<li title=\"Alle Tabs schließen\" class=\"close\">schließen</li>");
					}
				}
			}
			// Exec
			$($thisId+" .TabNav li").click(function(){
				var numContent = this.id.substr(this.id.length-1,this.id.length);
				changeContent(numContent);
			});
			// test function closeTabs
			$($thisId+" .TabNav li.close").click(function(){
				hideAll();
				$($thisId+" .TabNav li").removeClass("active");
				$($thisId+" .TabNav li.close").remove();
				//alert($($thisId+" .TabNav li.close").size());
			});
		});
	}
})(jQuery);

Code:
// Laden des Scriptes
<script type="text/javascript" src="Tabs.jquery.js"></script>
<script type="text/javascript">
// Funktion für die Tabs
$(document).ready(function() {
	$("#Tabs").Tabs({
	});
});
</script>

Code:
<div id="Tabs">
<form action="" method="post">
<div class="TabNav">
<ul>
   <li id="TabNav-1" title="TAB1">TAB1</li>
   <li id="TabNav-2" title="TAB2">TAB2</li>
   <li id="TabNav-3" title="TAB3">TAB3</li>
   <li id="TabNav-4" title="TAB4">TAB4</li>
   <li id="TabNav-5" title="TAB5">TAB5</li>
</ul>
</div>
    
<div id="Tabs-1" class="Tabs">
Hallo ich bin der Inhalt von Tab 1
</div>
<div id="Tabs-2" class="Tabs">
Ich bin der Inhalt von Tab 2
</div>
<div id="Tabs-3" class="Tabs">
Ich bin der Tab in der Mitte
<input type="text" name="Name" class="Textfeld" value="<?php echo $_POST["Name"]; ?>" />
<input type="submit" name="Speichern" value="Speichern" />
</div>
<div id="Tabs-4" class="Tabs">
Vorletzter Tab
</div>
<div id="Tabs-5" class="Tabs">
Ich bin leider das Schlusslicht
</div>
</form>
</div>

Nun suche ich die Möglichkeit nach absenden des Formulars per Button eine bestimten Tab anzusprechen.

z.B. index.php?show=Startseite&Tab=3 oder so.

Also ich will eine Sprungmarke setzen.

Hat jemand ne Idee ich stehe am Schlauch.
 
Zuletzt bearbeitet von einem Moderator:
Moin,

ich würde mal versuchen, hier anzusetzen:
Code:
defautContent: 1, // @param : number ( TabNav-number)

Das scheint ja festzulegen, welcher Tab standardmässig angezeigt wird.
Anstatt dort einen festen Wert zu nehmen, verwende eine Variable, welche du vorher per PHP "erstellst".

Beispiel:
im Dokument:
Code:
<script type="text/javascript">
<!--
var Tab=<?php echo (isset($_GET['Tab']))?$_GET['Tab']:1;?>;
//-->
</script>

Änderung am Skript:
Code:
defautContent: window['Tab'], // @param : number ( TabNav-number)

($_GET['Tab'] muss natürlich noch vorher geprüft werden, ob es ein gültiger Wert ist)

Im Dokument muss das externe Skript nach dem 1. Codeschnipsel eingebunden werden.
 
Oh ja danke.
Das kommt davon wenn mann Tomaten auf den Augen hat.

Code:
defautContent: 1, // @param : number ( TabNav-number)

Das habe ich total übersehen.
Werde deinen Vorschlag gleich mal ausprobieren.
 
Zurück