✔ Tabs jQuery

[joker_joker]

Hallo zusammen.
Ich hoffe hier kann mir jemand schnell und einfach helfen.
Ich benutze die ThickBox die ja auf jQuery aufbaut.

Nun habe ich ein einfaches und schönes Tabsmenü gefunden.

folgender Code

<script type="text/javascript" src="../../include/jQuery/jQuery.js"></script>
<script type="text/javascript">

	//Javascript für das Tab Menü
	$(function () {
		var tabContainers = $('div.tabs > div');
		tabContainers.hide().filter(':first').show();
			
		$('div.tabs ul.tabNavigation a').click(function () {
			tabContainers.hide();
			tabContainers.filter(this.hash).show();
			$('div.tabs ul.tabNavigation a').removeClass('selected');
			$(this).addClass('selected');
			return false;
		}).filter(':first').click();
	});

</script>

<div class="tabs">
   <ul class="tabNavigation">
      <li><a href="#10"><strong>Tab 10</strong></a></li>
      <li><a href="#11"><strong>Tab 11</strong></a></li>
      <li><a href="#12"><strong>Tab 12</strong></a></li>
   </ul>
</div>

<div id="10" class="tabContainer">
Hallo ich bin der erste Tab.
</div>
<div id="11" class="tabContainer">
Hallo ich bin der zweite Tab.
</div>
<div id="12" class="tabContainer">
Hallo ich bin der dritte Tab.
</div>

Wenn ich nun die Seite laden lasse öffnet er mir den 1 Tab mit der ID 10.
Gibt es eine Möglichkeit das, wenn ich in den 2 Tab mit der ID 11 eine Form also Schaltfläche lege z.B. für eine update eines Datensatzes in eine Datenbank (das mit php realisiet wurde) das nach dem Reload der Seite wieder der 2 Tab geöffnet wird also das quasi in meiner URL nach der Adresse index.php#11 steht das er sich hier die Information für die ID holt?

Hoffe jemand hat eine Idee

MfG Marco

 

[Quaese]

Hi,

über die fett formatierten Stellen im Quellcode kannst du über die ID festlegen, welcher Tab geöffnet werden soll. Ich habe mir auch erlaubt, die IDs nicht mit einer Zahl beginnen zu lassen, was nicht zulässig ist.

	//Javascript für das Tab Menü
$(function () {
  var tabContainers = $('div.tabs > div');
  tabContainers.hide().filter('#t11').show();

  $('div.tabs ul.tabNavigation a').click(function () {
    tabContainers.hide();
    tabContainers.filter(this.hash).show();
    $('div.tabs ul.tabNavigation a').removeClass('selected');
    $(this).addClass('selected');
    return false;
  }).filter('#t11').click();
});

Da dir offensichtlich PHP zur Verfügung steht, könntest du die erforderliche ID über die URL übergeben, extrahieren und im JavaScript zugänglich machen.

Vielleicht hilft dir das weiter.

Ciao
Quaese

 

[joker_joker]

Hallo hmm...

Das funktioniert leider nicht :-(

Hab jetzt erst mal die ID's geändert.

Sieht jetzt so aus.

<script type="text/javascript" src="../../include/jQuery/jQuery.js"></script>
<script type="text/javascript">

	//Javascript für das Tab Menü
	$(function () {
		var tabContainers = $('div.tabs > div');
		tabContainers.hide().filter(':first').show();
			
		$('div.tabs ul.tabNavigation a').click(function () {
			tabContainers.hide();
			tabContainers.filter(this.hash).show();
			$('div.tabs ul.tabNavigation a').removeClass('selected');
			$(this).addClass('selected');
			return false;
		}).filter(':first').click();
	});

</script>

<div class="tabs">
   <ul class="tabNavigation">
      <li><a href="#ID10"><strong>Tab 10</strong></a></li>
      <li><a href="#ID11"><strong>Tab 11</strong></a></li>
      <li><a href="#ID12"><strong>Tab 12</strong></a></li>
   </ul>
</div>

<div id="ID10" class="tabContainer">
Hallo ich bin der erste Tab.
</div>
<div id="ID11" class="tabContainer">
Hallo ich bin der zweite Tab.
</div>
<div id="ID12" class="tabContainer">
Hallo ich bin der dritte Tab.
</div>

Danke erstmal für diesen Tip.

Wenn ich das hier änder macht er mir auch die richtige Tab auf.
Aber leider bekomme ich das noch nicht dynamisch hin. Also das er mir das aus der URL abliest. Z.B. index.php?show=daten#ID10

<script type="text/javascript" src="../../include/jQuery/jQuery.js"></script>
<script type="text/javascript">

	//Javascript für das Tab Menü
	$(function () {
		var tabContainers = $('div.tabs > div');
		tabContainers.hide().filter(':first').show();
			
		$('div.tabs ul.tabNavigation a').click(function () {
			tabContainers.hide();
			tabContainers.filter('#ID10').show();
			$('div.tabs ul.tabNavigation a').removeClass('selected');
			$(this).addClass('selected');
			return false;
		}).filter(':first').click();
	});

</script>

Wenn jetzt das dynamisch ging und dann noch die CSS Class richtig geändert werden würde wäre ich echt glücklich.

 

[Quaese]

Hi,

ein Beispiel mit PHP, das bei mir funktioniert.

<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="../JS-Scripts/jquery/jquery-1.2.6.js"></script>
<script type="text/javascript">
<?php
  $strID = "#" . (($_GET['id'] != "")? $_GET['id'] : "t10");
  echo("var strID = '".$strID."';\n");
?>

  //Javascript für das Tab Menü
  $(function () {
    var tabContainers = $('div.tabs > div');
    tabContainers.hide().filter(strID).show();

    $('div.tabs ul.tabNavigation a').click(function () {
      tabContainers.hide();
      tabContainers.filter(this.hash).show();
      $('div.tabs ul.tabNavigation a').removeClass('selected');
      $(this).addClass('selected');
      return false;
    }).filter(strID).click();
  });

</script>
</head>
<body>
<div class="tabs">
   <ul class="tabNavigation">
      <li><a href="#t10"><strong>Tab 10</strong></a></li>
      <li><a href="#t11"><strong>Tab 11</strong></a></li>
      <li><a href="#t12"><strong>Tab 12</strong></a></li>
   </ul>

	<div id="t10" class="tabContainer">
	Hallo ich bin der erste Tab.
  <a href="<?php echo($_SERVER['PHP_SELF'].'?id=t10'); ?>">eins</a>
	</div>
	<div id="t11" class="tabContainer">
	Hallo ich bin der zweite Tab.
  <a href="<?php echo($_SERVER['PHP_SELF'].'?id=t11'); ?>">zwei</a>
	</div>
	<div id="t12" class="tabContainer">
	Hallo ich bin der dritte Tab.
  <a href="<?php echo($_SERVER['PHP_SELF'].'?id=t12'); ?>">drei</a>
	</div>
</div>
</body>
</html>

Ciao
Quaese